Memoization has a cost; use it when it solves a concrete problem.
Section: Performance Pitfalls
Do not memoize everything
tsx
tsx
// Not every derived value needs useMemo.
const fullName = `${firstName} ${lastName}`;Explanation
Simple computations are often cheaper and clearer without `useMemo`.
Learn the surrounding workflow
Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.
Related commands
Same sheet · prioritizing Performance Pitfalls
Derive data during render when possible
Avoid effects that only derive data from props/state.
Perform event-specific work in event handlers
Do not move user-triggered logic into effects unnecessarily.
Memoize objects used in dependencies
Avoid recreating dependency objects every render when identity matters.
Call hooks only at the top level
Do not call hooks in conditions, loops, or nested functions.
Stale closure pitfall
Effects and callbacks capture values from the render where they were created.
Call hooks only from components or custom hooks
Do not call hooks from regular utility functions.