# Performance and Re-render Debugging — Redux Toolkit / Zustand

Source: https://www.skillbyai.com/en/redux-zustand/s-perf

> Measure, then fix.

## 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.

```tsx
// 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.

**Quiz:** Which tool shows which components rendered during an interaction?

- [x] The React DevTools Profiler
- [ ] The browser Network tab
- [ ] The TypeScript compiler
- [ ] npm audit

*Answer:* The React DevTools Profiler. Profile before optimising.