state/selector-stable-result

Dlaczego

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

Poprawka

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.

Przykłady

// 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)

Źródła

• 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)

Przeczytaj w terminalu

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