What is the useCallback hook in React?

What is the useCallback hook in React?

The useCallback hook is a React hook that returns a memoized version of a callback function. It helps optimize performance by preventing unnecessary re-creations of functions on re-renders.

When should I use useCallback?

You should use useCallback when you pass a callback to a child component that relies on reference equality to prevent unnecessary renders.

Can you give me an example of useCallback in action?

Sure! Here's a simple example:

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <button onClick={increment}>Count: {count}</button>;
};

This memoizes the increment function, so it doesn't get recreated on every render.

What are the benefits of using useCallback?

The main benefits are performance optimization by reducing unnecessary renders and ensuring that the same function reference is used across renders, which is especially useful in dependency arrays.