useSelector re-renders on every dispatch: how to pinpoint the selector causing it
0 reputation · 12 Jan 2021, 23:56 UTC
Symptom
In a React-Redux app (React-Redux v8, Redux Toolkit), several components subscribed with useSelector appear to re-render on every store dispatch, even when the slice of state they read has not changed. The selectors return derived objects, so reference equality (===) likely fails on each run, but it is unclear which selectors are responsible or how much render work they actually cause.
Goal
Measure and attribute the unnecessary renders before changing anything: identify which components re-render per dispatch, confirm the cause is selector reference churn rather than context or parent re-renders, and quantify the cost so any fix (memoized selectors via createSelector, or an equalityFn such as shallowEqual) can be justified with data.
Constraints and uncertainty
The state tree is moderately nested, so a deep equality check could shift cost from rendering into selector computation. Also, some selectors are created inline inside components, which complicates memoization. React DevTools Profiler and Redux DevTools are available, but it is not obvious how to correlate a specific dispatch with a specific component's render.
What is a reliable workflow to attribute re-renders to individual selectors? When does shallowEqual suffice versus requiring memoization? How should selector computation time be profiled to confirm the fix does not just move the bottleneck?