React Performance - useCallback

useCallback memoizes functions to prevent unnecessary child re-renders.

Problem

function Parent() {
  const [count, setCount] = useState(0);

  // New function on every render
  const handleClick = () => {
    console.log('Clicked');
  };

  return <Child onClick={handleClick} />;
}

Solution

import { useCallback } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []); // Function created once

  return <Child onClick={handleClick} />;
}

With Dependencies

function Parent() {
  const [userId, setUserId] = useState(1);

  const fetchUser = useCallback(() => {
    fetch(`/api/users/${userId}`);
  }, [userId]); // Recreates when userId changes

  return <Child onFetch={fetchUser} />;
}

Remember

• Use with React.memo on child
• Specify dependencies
• Prevents child re-renders

Next: Learn React.memo!