Finding What Is Actually Slow

Start here. Install React Developer Tools and use the profiler. It shows which components re-rendered, how long each took, and why.

Optimizing before measuring is how applications end up wrapped in memo and useCallback everywhere, running slower than they started, with code nobody wants to touch.

What causes a re-render. A component re-renders when its own state changes, when its props change, or when its parent re-renders. That third one is the usual surprise: a child with unchanged props still re-renders when its parent does.

That is normally fine. Renders are cheap. It becomes a problem when one piece of state near the top of the tree changes on every keystroke and the tree below it is large.

✦ The most common real cause

Not slow components. One large piece of state placed too high, so typing in a search box re-renders an entire page. The fix is usually to move that state down to the smallest component that needs it, which costs nothing and removes the problem entirely. Reach for memo only when the state genuinely has to live high up.