React Render Performance

Patterns for minimizing unnecessary React re-renders when consuming external state. Prefer selector-based subscriptions over useState(wholeObject) — subscribe only to the slice each component needs.

Core idea

Storing a full state object in React state (e.g. useState(snapshot) and subscribing to every change) forces re-renders on any update. A component that only needs phase will still re-render when quiz.selectedWrong changes if both live in the same object.

Avoid: subscribe → setState(fullObject) → read a field in render.
Prefer: subscribe to a selector or slice so the component re-renders only when that value changes. Every library below supports this; use it.