स्टेट परिवर्तन पुनः-रेंडर को ट्रिगर करते हैं, और खराब संरचित स्टेट आवश्यकता से कहीं अधिक पुनः-रेंडरिंग का कारण बन सकता है — ऐप को धीमा कर सकता है। मुख्य रणनीतियां: सीमित रूप से सबस्क्राइब करें, स्टेट विभाजित करें, मेमोइज़ करें, और स्टेट को स्थानीय रखें।
store = ();
count = store.;
count = ( s.);
चयनात्मक सबस्क्रिप्शन (Zustand/Redux selectors, Jotai atoms) एकमात्र सबसे बड़ा लीवर है — कंपोनेंट केवल तब पुनः-रेंडर करते हैं जब उनका विशिष्ट स्लाइस बदलता है, हर स्टोर अपडेट पर नहीं।
// ❌ one big context → every consumer re-renders when anything changes
// ✅ separate contexts so unrelated updates don't cross-trigger
<ThemeContext><UserContext>...</UserContext></ThemeContext>
const Item = React.memo(ItemComponent); // skip re-render if props are unchanged
const expensiveValue = useMemo(() => compute(data), [data]);
const handleClick = useCallback(() => doX(id), [id]); // stable function reference
मेमोइज़ेशन बच्चों को पुनः-रेंडर होने से रोकता है जब उनके props (संदर्भ द्वारा) नहीं बदले हों — लेकिन यह केवल तब काम करता है जब आप props/callbacks को भी संदर्भ से स्थिर रखते हैं (इसलिए useCallback/useMemo) और स्टेट को अपरिवर्तनीय रूप से अपडेट करते हैं।
State high in the tree re-renders everything below it.
Move state DOWN to the smallest component that needs it → smaller re-render scope.
// ❌ a new object/array each render breaks memoization downstream
<Child config={{ a: 1 }} /> // new {} every render
// ✅ stable reference
const config = useMemo(() => ({ a: 1 }), []);
const selectActive = createSelector([s => s.items], items => items.filter(i => i.active));
// returns the SAME reference when items didn't change → no needless re-render
React DevTools Profiler / "why did you render" → find what actually re-renders
before optimizing. Premature memoization adds complexity for no gain.
अत्यधिक पुनः-रेंडरिंग React/स्टेट-संचालित ऐप्स में सुस्त प्रदर्शन का एक प्रमुख कारण है, और वे इसी तरह से उत्पन्न होते हैं कि स्टेट कैसे संरचित है और इसकी सदस्यता ली जाती है।
टूलकिट — सीमित चयनात्मक सबस्क्रिप्शन, विभाजित कॉन्टेक्स्ट, स्थिर संदर्भों के साथ मेमोइज़ेशन, अपरिवर्तनीय अपडेट्स, और स्टेट को स्थानीयकृत करना — सीधे पुनः-रेंडर स्कोप को नियंत्रित करता है।
महत्वपूर्ण रूप से, आप अनुकूलन से पहले वास्तविक बाधा खोजने के लिए मापें (Profiler) चाहिए, क्योंकि लापरवाह मेमोइज़ेशन जटिलता जोड़ता है बिना लाभ के।
यह समझना कि क्या पुनः-रेंडरिंग को ट्रिगर करता है और उन्हें कैसे सीमित करना है, बड़े पैमाने पर प्रदर्शन करने वाले ऐप्स के लिए आवश्यक है।