Use the arrow function syntax for event handlers in React functional components. This is a best practice because it avoids the need to bind the 'this' keyword to the component instance, which can be confusing and error-prone. Arrow functions automatically bind 'this' to the lexical scope of the component, which makes it easier to reason about the code and avoids common bugs.

Here is an example of how to use arrow functions for event handlers in a functional component:

import React from 'react';

function MyComponent() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

In this example, the 'handleClick' function is defined using the arrow function syntax. When the button is clicked, the function will be called and the message 'Button clicked' will be logged to the console. Note that we don't need to bind 'this' to the component instance because arrow functions automatically bind 'this' to the lexical scope of the component.

In contrast, here is an example of how to define an event handler using the traditional function syntax:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

In this example, we define the 'handleClick' function using the traditional function syntax. We also need to bind 'this' to the component instance in the constructor, which can be confusing and error-prone. Using arrow functions for event handlers in functional components is a simpler and more concise approach.