react-use-callback

To prevent unnecessary re-renders in React, use the useCallback hook to stabilize callback references passed to memoized children. This ensures the callback identity remains consistent across renders unless its dependencies change, avoiding child re-renders.

Use useCallback for dependency management in React effects when a callback is used as an effect dependency. Stabilizing the callback reference prevents the effect from re-running on every render due to a new function identity being created.

The best way to return stable callbacks from custom React hooks is wrapping the returned function with useCallback. This memoizes the callback, minimizing dependencies for consumers and avoiding stale references while maintaining consistent behavior.

Your memoized child component re-renders because the useCallback dependency array likely includes values that change every render. Correct dependency management requires including only the variables the callback actually uses to maintain a stable reference.

Common useCallback anti-patterns in React include omitting dependencies to create stable references artificially, which causes stale references, and overusing memoization on callbacks that are never passed to memoized children, adding overhead without benefit.

You can use useCallback for click handlers in React, but it is not always beneficial. Performance optimization is achieved when the stabilized callback is passed to a memoized child; otherwise, useCallback adds unnecessary overhead without preventing re-renders.