useRef returns a mutable object that persists across renders without triggering re-renders. useState triggers a re-render when it changes. Use useRef for DOM references and mutable values that should not drive the UI, and useState for values that should.
useMemo memoizes a value; useCallback memoizes a function reference. Use useMemo for expensive computations and useCallback for stable functions passed to memoized children.
For expensive computations that would otherwise run on every render, like sorting a large list. Also to keep an object reference stable for memoized children. Measure first, since memoization is not free.
When passing a function as a prop to a child wrapped in React.memo, so the child does not re-render just because the parent created a new function. Also for handlers used in child effects, to avoid re-running the effect.
Browse all our FAQs or reach out to our support team
Your learning library
Find your next course. Build something great.
