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.

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.

قلل من عمليات إعادة عرض React غير الضرورية عند استهلاك الحالة الخارجية (XState، @xstate/store، Zustand، Redux، Nanostores، context). تفضل الاشتراكات المستندة إلى المحدد على useState(wholeObject). يُستخدم عند التعامل مع الحالة الخارجية في React، أو تحسين عمليات إعادة العرض، أو اختيار أنماط الحالة، أو التكامل مع هذه المكتبات. المصدر: jonmumm/skills.