When should you use memo, useMemo and useCallback?
Answer out loud or in your head first, then compare.
Answer
First I check what is actually slow. useMemo can remember the result of an expensive calculation. useCallback helps keep the same function between renders, and memo can limit a component's rendering when its props haven't changed. These are tools for specific problems, not mandatory decoration on every component.
If the parent creates a new props object every time, it can cancel out some of these savings. Sometimes a better fix is moving state closer to where it's used, or rendering only the visible rows of a table. I check the effect with a profiler, i.e. a tool that measures execution. Which automatic optimisations are available depends on the project's version and configuration.
Why it matters: Choosing the right optimisation matters more than remembering hook names.
Possible follow-ups: Does useCallback make the function itself compute faster?
How did it go? Be honest — “Not yet” puts the question on your review list.
Start with
- C-P01 · What is React, and what is a component? — React, Next.js and frontend
- C-P02 · How do props and state differ? — React, Next.js and frontend
- C-P04 · What is useEffect for, and what does the dependency array mean? — React, Next.js and frontend
Related questions
Further reading
- React: Synchronizing with Effects(opens in a new tab)Docs; accessed 22.10.2026. What Effects are for, cleanup, and protecting against stale results.