What is useCallback?

useCallback preserves a function's identity across re-renders until its dependencies change. Think of it as telling React "keep using this same function unless something important changes."ormance by avoiding unnecessary re-renders.

How it works

• Takes a function and dependency array as arguments
• Returns the same function instance until dependencies change
• Prevents child components from re-rendering unnecessarily

Like a craftsman creating one key and reusing it for all doors until the lock design changes - useCallback creates the function once and reuses it until dependencies change.

When to use useCallback

• Event handlers for memoized components - Prevents React.memo components from re-rendering
• Hook dependencies - When your function is used in useEffect, useMemo, or other hooks
• Performance bottlenecks - Only when you've identified actual performance issues

Basic usage

• const handleClick = useCallback(() => { doSomething() }, [dependency])
• Function recreates only when dependency changes
• Same function reference passed to child components

useCallback vs useMemo

• useCallback - Memoizes functions to prevent recreation
• useMemo - Memoizes values to prevent recalculation

useCallback saves functions, useMemo saves computed results. Both prevent unnecessary work.

Best practices

• Don't overuse - Only optimize when you have proven performance issues
• Include all dependencies - Avoid stale closure bugs
• Consider the cost - Memoization has overhead, make sure the benefit outweighs it

Remember

Premature optimization can hurt performance more than help. Use useCallback strategically, not everywhere.