react-render-performance

Zustand triggers unnecessary React re-renders when components subscribe to the entire store instead of precise slices. Using module-level selectors that return primitives or stable references ensures components only re-render when the relevant state actually changes.

To prevent high-level React components from re-rendering frequently, push state subscriptions down to lower leaf components. These leaves should subscribe to small stores or precise selectors, avoiding high-level stores by default to isolate updates.

Selecting precise state slices with XState or Redux requires using module-level selectors that return primitives or stable references. This selector-based subscription pattern ensures components re-render only when the specific derived value updates.

Yes, the selector-based subscription approach works with React context. It applies to components using external state libraries like XState, Zustand, Redux, Nanostores, and React context across apps of various sizes to prevent unnecessary re-renders.

The best way to structure React state selectors for performance is to use module-level selectors that return primitives or stable references. This prevents unrelated state updates from triggering re-renders in components subscribed to external stores.

You should avoid module-level selectors when a component genuinely needs to subscribe to the entire store or when the overhead of slicing state outweighs the re-render cost. Returning unstable references without selectors can also cause performance issues.