← Writing
A React performance checklist I actually use
Most React performance advice is either too abstract to act on or too specific to the last person's bug. Here's the list I actually run through before calling a screen done — in the order I run it, because order matters: the first two catch most problems, and the rest are for when they don't.
- Profile before touching anything. Open the React DevTools profiler, record the interaction that feels slow, and look at which components re-rendered and why. Guessing which component is slow wastes more time than the fix itself ever does.
- Check the render count of list items. If a list of 200 rows re-renders all 200 on every keystroke in an unrelated filter input, the state is probably too high in the tree. Moving the input's state down, or the list's state up past the input, usually fixes it in one move.
- Look for objects and arrays created in render.
style={{ margin: 8 }}oroptions={[...]}written inline creates a new reference every render, which quietly defeatsmemoon whatever receives it as a prop. Hoisting the literal out or wrapping it inuseMemocosts one line. - Confirm keys are stable, not indexes. An index key looks fine until rows are inserted or removed, at which point React reuses the wrong DOM node and local state — an open dropdown, a focused input — jumps to the wrong row. I grep for
key={i}before every release. - Check what's in the initial JS bundle. A modal, a chart library, or a rich text editor imported at the top of a route file ships to everyone who visits, even the 5% who open the modal.
next/dynamicwithssr: falsefor anything behind a click fixes this in a few minutes and is usually the single biggest win on the list. - Measure, don't assume, with real data. Fifty rows in dev behave nothing like the five thousand a real customer has. I keep one seeded dataset at realistic scale specifically for this check, because 'it felt fast while I was building it' is not a benchmark.
None of these are exotic. The list works because it's boring and repeatable — I run it the same way every time, instead of reaching for memo reflexively and hoping.