Use useMemo or useCallback only when a specific performance problem or identity-sensitive dependency gives them a job. First make state and rendering design sound, then profile a slow interaction and add the smallest targeted optimization that helps. The hooks are useful tools, not requirements for every calculation or function.
What these hooks actually memoize
useMemo caches a calculation result
useMemo(calculateValue, dependencies) runs the calculation on the initial render. On later renders, React returns the cached result if every dependency compares equal to its previous value using Object.is; otherwise it recalculates. The calculation must be pure. React may call it twice in development Strict Mode to expose accidental impurities, and memoization does not make the initial render faster. See the React useMemo reference.
As an Amazon Associate I earn from qualifying purchases.
useCallback caches a function identity
useCallback(fn, dependencies) returns the same function identity while its dependencies remain equal under the same comparison. It does not call fn, nor does it prevent JavaScript from creating the inline function expression during render; it lets React reuse the previously cached function instead. See the React useCallback reference.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsBoth hooks are performance optimizations, not correctness guarantees or semantic storage. React can discard their caches in documented circumstances, so the application must still work if a cached value or function is recreated.
#1 Best Overall
When useMemo is worth considering
- A calculation is measurably slow, and its inputs often stay unchanged between renders, so reusing the result can avoid repeating meaningful work.
- A stable object or array prop lets a child wrapped in
memoskip work. Check the full prop path: one always-new prop can prevent the child from benefiting. - A stable value is needed as a dependency of another Hook, and recreating it would trigger work that should not repeat when its meaningful inputs have not changed.
In the last two cases, the gain is not that objects are inherently expensive. It is that a consumer can use stable identity to avoid work. If no calculation, memoized child, or Hook dependency benefits, an ordinary value is simpler.
When useCallback is worth considering
- You pass a callback to a child wrapped in
memo, and keeping the callback identity stable allows that child to skip rendering when its other props are unchanged. - The function is a dependency of another Hook, and stabilizing it prevents that Hook from doing unnecessary work.
Without such a consumer, a function declared during render is usually the straightforward choice. Wrapping every handler does not stop the inline expression from being created and does not automatically make rendering faster.
Rank #2
Should you add either hook everywhere?
No. React notes that broad memoization is not necessarily harmful for every team, but it adds complexity and can make code harder to read. It may also accomplish nothing when dependencies change on every render. React’s guidance is to rely on these hooks only for performance optimization, not as a default style.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Before adding a hook, check whether the problem has a simpler cause:
- Keep state close to the components that use it so unrelated parts of the tree do not need to respond to it.
- Keep rendering pure; fix code that mutates values or causes side effects during render rather than masking it with memoization.
- Avoid unnecessary Effects and chains of Effect-driven state updates. If an object or function is used only by an Effect, consider creating it inside the Effect; if it does not depend on props or state, consider moving it outside the component.
- For visual wrapper components, consider passing changing content as JSX children where that fits the component design.
These are design checks, not guarantees that an application will be fast. Profile the interaction that feels slow before choosing an optimization.
How to decide with the Profiler
- Reproduce the real interaction. Use representative data and the route or workflow that users report as slow. React’s React Developer Tools includes a Profiler for inspecting render work.
- Identify the work. Look for components doing unnecessary rendering or a calculation that consumes meaningful time. Use CPU throttling when it helps approximate the conditions you care about.
- Check whether identity matters. Confirm that a memoized child or another Hook actually receives or depends on the value whose identity you plan to stabilize. Also check whether another prop or dependency changes each render.
- Try the smallest change. Add one targeted memoization, then compare the same interaction and data. Test the production build on a representative device: development mode and Strict Mode can distort timings.
- Keep it only if the trade-off is worthwhile. Compare interaction latency and render or computation work with dependency-change frequency, correctness when dependencies change or caches are discarded, and the added maintenance burden.
There is no universal render-count or percentage threshold in React’s guidance. The useful result is evidence from your application and its users’ relevant conditions, not a claim that a particular hook always saves a fixed amount of time.
Rank #4
Keep dependency lists correct
Every reactive value used by a calculation or callback belongs in its dependency list. React compares dependencies with Object.is; the list must be written inline and have a constant number of entries. Missing dependencies can leave a calculation or callback using stale values and can also make it harder for compiler analysis to understand the code. Follow the React Hooks lint rules rather than suppressing warnings to make memoization appear stable.
Recommended Free Tools
What React Compiler changes—and what it does not
React Compiler is a build-time tool that can automatically memoize values, functions, and components in code it can analyze. It is intended to reduce the need to add useMemo, useCallback, and memo manually. Its coverage depends on the code and compiler analysis; it is not automatically enabled in every repository or framework setup.
React’s Compiler 1.0 guidance, published on October 7, 2025, recommends relying on the compiler for memoization in new code while using the hooks where precise control is needed. For existing code, the guidance is to leave current memoization in place or test removals carefully, because removing it can change compiler output. The compiler preserves existing manual memoization, and missing dependencies can interfere with its understanding of data flow. Read the React Compiler 1.0 announcement and check the current React Compiler setup documentation for your project’s version, compatibility, and configuration; support and tooling details can change.
Quick Recap
A practical rule for new and existing code
- New code: If React Compiler is enabled and working in the project, start with clear code and let it handle optimizations it can analyze. Add a manual hook when profiling or a specific identity-sensitive dependency justifies precise control.
- Existing code: Do not remove memoization simply to reduce hook count. Test the change against the relevant behavior and production performance, especially if the compiler is enabled.
- Either way: Keep dependency lists complete, and never rely on a cache for correctness.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
