react-use-callback

Use useCallback to memoize functions passed to memoized child components, ensuring referential stability and preventing unnecessary re-renders when the parent component updates. It caches function definitions between renders.

Apply useCallback when passing callbacks to components wrapped in React.memo, managing effect dependencies, or returning values from custom hooks. It ensures functions update only when specified dependencies change.

useCallback memoizes function references to maintain referential stability, while useMemo caches computed values. Both prevent unnecessary re-renders but target different types of references in React components.

Memoized child components re-render if useCallback dependencies change frequently or if the child component is not properly wrapped in React.memo. Verify dependency arrays and component memoization to ensure stable function references.

Yes, useCallback stabilizes function references used in useEffect dependency arrays. This prevents effects from re-running unnecessarily by ensuring the function identity remains consistent across renders unless its specified dependencies change.

Common anti-patterns include overusing useCallback on functions never passed to memoized children, omitting dependencies, or wrapping every function. This adds overhead without performance benefits and can cause stale closures or unnecessary complexity.