React › Performance (memo/useMemo)

Why should you avoid overusing useMemo and React.memo throughout an entire app?

Intermediate

Answer

Every use of useMemo or React.memo has a small cost of its own, since React still needs to check whether the dependencies changed. Adding them everywhere, especially to simple, fast components, can add unnecessary complexity and sometimes even slow things down slightly, without providing any real benefit. They work best when applied specifically to components or calculations that are genuinely expensive or re render very often.

// Unnecessary, this component is already extremely fast to render
const SimpleText = React.memo(({ text }) => <p>{text}</p>);

// Worthwhile, this involves genuinely expensive filtering work
const filtered = useMemo(() => expensiveFilter(hugeList), [hugeList]);

Real-world example A team removes React.memo from several tiny, simple components after realizing it added unnecessary complexity without any measurable performance benefit, keeping it only on the few components that actually needed it.

Common follow-ups: How do you measure whether a specific optimization actually made a real difference?;What is a good rule of thumb for deciding when a component is worth memoizing?

React DevTools & Debugging;Design Patterns in React