React Performance - useCallback

useCallback memoizes functions to prevent unnecessary child re-renders.

Problem

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

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

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

Solution

```javascript 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

```javascript 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!