Optimizing React Apps with useCallback

React’s useCallback hook can help to avoid unnecessary re-renders in your application, improving performance. It returns a memoized version of the callback function that only changes if one of the dependencies has changed.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

In this snippet, a and b are the dependencies. The callback function will not be recreated unless either a or b changes.

Without useCallback, the function would be recreated every render, potentially causing unnecessary re-renders in child components that depend on the callback.

function Component() {
  doSomething(a, b);

  return <ChildComponent callback={doSomething} />;
}

In this case, doSomething function is recreated every time Component re-renders, causing ChildComponent to re-render as well even if props have not changed.

By understanding and using useCallback, you can control when components re-render and optimize your React applications.