How do you debug a Redux performance problem?

A practical, step-by-step approach:

1. Confirm it's actually Redux: use the React DevTools Profiler to see which components re-render and how often, before assuming Redux is the culprit.
2. Inspect actions/state with Redux DevTools: check how frequently actions are dispatched and how large/deeply nested the state diffs are on each action.
3. Look for unstable selector results: a selector that returns a new object/array/function on every call (e.g., state => state.items.filter(...)) breaks useSelector's reference equality check and forces re-renders even when nothing meaningful changed. Wrap it in createSelector (Q335).
4. Check for over-broad useSelector calls: selecting an entire slice (state.user) instead of the specific field needed (state.user.name) causes re-renders on unrelated field changes (Q334).
5. Verify normalization: deeply nested/duplicated state (Q336) often causes broad reference changes on every update; normalizing narrows down what actually changes.
6. Check for missing memoization on connected children: wrap presentational components in React.memo so a parent re-render doesn't cascade if their own props are unchanged.
7. Use the why-did-you-render library (or React DevTools' "highlight updates") to visually confirm exactly which components re-render and why.
8. Measure, don't guess: use the Profiler's flame chart/ranked view to confirm the fix actually reduced render counts/time before moving on.

Practical Code Example

// Debugging Redux Performance:
// 1. Redux DevTools: Profile action dispatch frequency
// 2. React DevTools Profiler: Check which components re-render on state changes
// 3. Reselect: Verify selectors aren't returning new object references on every call