let's say we have the components like this:

const Example = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = () => setCounter(counter => counter + 1); 
  return (
    <div>
      <Button onClick={increment} />
      
      <div>{counter}</div>
    </div>
  );
}

When I passed the onClick handler as an arrow function, my eslint throw a warning:

error    JSX props should not use arrow functions        react/jsx-no-bind

One solution proposed from a post is to wrapped in a useCallback hook, with empty array. And when I change to this, the eslint warning really disappear.