Performance and Re-render Debugging

Find who re-renders and why

Use the React DevTools Profiler to record an interaction and see which components rendered and how long they took; enabling the option to highlight updates while rendering shows re-renders live. Common causes in store-based apps: selecting the whole store, selectors that return new objects or arrays, passing new inline objects as props to memoised children, and storing fast-changing values (mouse position, input text) in global state. React-Redux 9 includes development-mode checks that warn when a selector returns a different result for the same input (check the docs for your version). Fix by selecting smaller values, using createSelector or useShallow, and keeping hot state local.

Before and after

Typical re-render fixes.

// BEFORE: new array every action -> re-renders on every dispatch
const done = useAppSelector((s) => s.todos.list.filter((t) => t.done));

// AFTER: memoised selector returns the same array until todos change
const selectDone = createSelector([(s: RootState) => s.todos.list], (list) =>
  list.filter((t) => t.done)
);
const doneMemo = useAppSelector(selectDone);

// BEFORE (Zustand): whole store subscription
const store = useCart();

// AFTER: only what this component needs
const count = useCart((s) => s.items.length);

A smoke detector, not a guess

You do not repaint every room because the house smells of smoke; you check which detector is beeping. The Profiler tells you which component is actually re-rendering.

Quick check: Which tool shows which components rendered during an interaction?

• The React DevTools Profiler
• The browser Network tab
• The TypeScript compiler
• npm audit