useMemo: Cache Expensive Calculations in React
The useMemo hook caches a function's return value, preventing slow calculations from running on every render. Use it to skip heavy data filtering unless its inputs change. The main footgun is a missing dependency, which leads to stale, cached data.
Think of useMemo as a cache for a function's return value inside your component. It runs a calculation once, stores the result, and returns that cached value on subsequent renders unless its dependencies change. It's crucial for performance when filtering large arrays or creating objects passed as props to memoized child components, preventing needless re-renders. The biggest footgun is an incomplete dependency array; forgetting a value leads to stale data because the calculation won't re-run when it should.
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.