Unexpected re-render when zustand selector returns fresh object reference
0 reputation · 19 Jun 2026, 20:03 UTC
The goal is to adopt zustand feature by feature in a small React app while legacy Redux or context state remains in place, without causing avoidable re-renders during the migration.
Zustand compares the result of each useStore selector with Object.is by default. If a selector returns a new object or array reference on every evaluation, components can re-render even when the underlying store data has not changed. Inline selectors are recreated each render, but zustand only re-evaluates them on store updates, so the returned reference is the practical risk.
It is unclear which selector pattern is safest for incremental adoption: returning primitives, providing an explicit equality function to useStore, or memoizing selectors outside the component, and how each choice interacts with coexisting legacy state.
Which selector pattern minimizes re-renders during a gradual zustand adoption? Does providing an equality function to useStore avoid the Object.is reference problem without introducing deep-comparison cost? Should object selectors be avoided entirely until legacy state is removed?