useCallback: Cache Functions Between Renders
useCallback caches a function so it's not recreated on every render. This is crucial for performance when passing callbacks as props to memoized components, preventing them from re-rendering unnecessarily.
useCallback caches a function, giving you the same function instance between renders unless its dependencies change. This is a key performance tool, especially when passing callbacks to memoized child components (React.memo) or using them in useEffect dependency arrays to prevent unnecessary re-renders or effect runs. The most common footgun is an incomplete dependency array, which creates stale closures with outdated state or props.
Read the original → react.dev
- #react
- #hooks
- #performance
- #memoization
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.