state/selector-stable-result

Why

A selector such as (s) => ({ count: s.count, user: s.user }) builds a new object each time it runs, so the store sees a "changed" result on every update. With React Redux the component re-renders after every dispatched action, wherever it happened. With Zustand 5, which compares with Object.is, the same selector can loop until React stops with "Maximum update depth exceeded".

Fix

Select one value per call (const count = useStore((s) => s.count)), or wrap a multi-value selector in useShallow (Zustand) or pass shallowEqual (React Redux). A derived list (s.todos.filter(...)) belongs in a memoized selector (createSelector) or is computed in the component from the raw slice.

Examples

// bad
const { count, inc } = useCounterStore((s) => ({ count: s.count, inc: s.inc }))
const done = useSelector((state) => state.todos.filter((t) => t.done))
// good
const [count, inc] = useCounterStore(useShallow((s) => [s.count, s.inc]))
const todos = useSelector((state) => state.todos)
const done = todos.filter((t) => t.done)

Sources

• Zustand docs, Migrating to v5 (source in the pmndrs/zustand repository)
• Zustand docs, useShallow (source in the pmndrs/zustand repository)
• React Redux docs, Hooks (useSelector equality; source in the reduxjs/react-redux repository)

Read it in the terminal

npx github:dawidolko/frontend-skills explain state/selector-stable-result