React's useCallback: Cache Functions, Not Just Values
useCallback gives you the same function instance across re-renders, as long as its dependencies are stable. This is key for optimizing child components with React.memo or preventing useEffect from re-running.
useCallback caches a function definition between renders, returning the same function instance unless a dependency changes. This prevents needless re-renders of child components memoized with React.memo that receive the function as a prop. It's also vital for stabilizing dependencies for useEffect. The primary footgun is a missing dependency, which creates a stale closure where the function uses old state or prop values. Overusing it for simple functions adds unnecessary complexity.
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.