Your useMemo Probably Isn't Doing Anything
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
React re-renders are widely misunderstood, leading developers to overuse useMemo and React.memo without real benefit. Only three things trigger a re-render: own state changes, context changes, or a parent passing a new element — props alone do not. Most re-renders are cheap function calls that rarely touch the DOM. The recommended fix order is: move state down, pass children as children (composition), stabilize references, then useMemo/useCallback, and finally React.memo as a last resort. The React Compiler (stable since Oct 2025) automates memoization but cannot restructure your component tree. Measure with DevTools Profiler before optimizing, and avoid dev-mode numbers since StrictMode renders twice intentionally.
Table of contents
📌 TL;DRA render is a function call, not a DOM updateThree things trigger a render. Props aren’t one of themMost renders are cheap, so measure before you fixThe ladder: structure first, memoization lastWhen the render really is heavyThe compiler does the memo half, not the structural half51.5K Impressions4 Comments