तुम्ही स्टेट अपडेट्स ला अत्यधिक री-रेंडर्स होण्यापासून कसे रोखता?

Question

Accepted Answer

स्टेट बदल री-रेंडर्स ट्रिगर करतात, आणि खराबपणे संरचित स्टेट **आवश्यकतेपेक्षा कितीतरी अधिक री-रेंडर्स** कारण बनू शकते — अ‍ॅप्लिकेशन धीमे करते. मुख्य कौशल्य: अरुंद सदस्यता, स्टेट विभाजन, मेमोइज करणे आणि स्टेट स्थानिक ठेवणे. ## 1. तुम्हाला आवश्यक असलेल्या किमान स्लाइससाठी सदस्य व्हा ```jsx // ❌ subscribing to the whole store → re-renders on ANY change const store = useStore(); const count = store.count; // ✅ select only what you use → re-renders only when `count` changes const count = useStore((s) => s.count); ``` निवडक सदस्यता (Zustand/Redux selectors, Jotai atoms) सर्वात मोठी लीव्हर आहेत — घटक केवळ तेव्हाच री-रेंडर होतात जेव्हा त्यांचा विशिष्ट स्लाइस बदलतो, प्रत्येक स्टोअर अपडेटला नव्हे. ## 2. स्टेट / कॉन्टेक्स्ट विभाजित करा ब्लास्ट त्रिज्या मर्यादित करण्यासाठी ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. घटक आणि मूल्य मेमोइज करा ```jsx 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`) आणि स्टेट **अपरिवर्तनीयपणे** अपडेट करता. ## 4. स्टेट शक्य तितके स्थानिक ठेवा ```text State high in the tree re-renders everything below it. Move state DOWN to the smallest component that needs it → smaller re-render scope. ``` ## 5. व्युत्पन्न मूल्ये संग्रहित करू नका; प्रत्येक रेंडर मध्ये नवीन संदर्भ टाळा ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. व्युत्पन्न डेटासाठी मेमोइज्ड सिलेक्टर्स वापरा ```js 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 ``` ## प्रथम मापन करा ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## हे महत्वाचे का आहे अत्यधिक री-रेंडर्स हे React/स्टेट-चालित अ‍ॅप्लिकेशनच्या आळशीपणाचे मुख्य कारण आहेत, आणि ते स्टेट कसे संरचित आणि सदस्य केले जाते यावरून येतात. टूलकिट — अरुंद निवडक सदस्यता, विभाजित कॉन्टेक्स्ट्स, स्थिर संदर्भांसह मेमोइजेशन, अपरिवर्तनीय अपडेट्स आणि स्टेट स्थानिकीकरण — री-रेंडर स्कोप थेट नियंत्रित करतात. महत्वाचे म्हणजे, तुम्ही ऑप्टिमाइज करण्यापूर्वी **मापन करा** (Profiler) खरी बाधा शोधण्यासाठी, कारण असावधान मेमोइजेशन लाभ न देता जटिलता जोडते. री-रेंडर्स काय ट्रिगर करते आणि त्यांना कसे समाविष्ट करायचे हे समजून घेणे मोठ्या प्रमाणावर अ‍ॅप्लिकेशनच्या कार्यक्षमतेसाठी आवश्यक आहे.