तपाईंले स्टेट अपडेटहरूलाई अत्यधिक पुन:रेन्डरिङबाट कसरी रोक्नु हुन्छ?

Question

Accepted Answer

स्टेट परिवर्तनहरूले पुन:रेन्डरिङ ट्रिगर गर्दछ, र खराब संरचनाको स्टेटले **आवश्यकता भन्दा बढी पुन:रेन्डरिङ** को कारण बन्न सक्छ — अनुप्रयोगलाई ढिलो बनादिन्छ। मुख्य रणनीतिहरू: संकीर्ण सदस्यता, स्टेट विभाजन, memoize, र स्टेटलाई स्थानीय रखनु। ## 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. कम्पोनेन्ट र मानहरू memoize गर्नुहोस् ```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 ``` Memoization ले बच्चा कम्पोनेन्टहरूलाई पुन:रेन्डर हुनबाट रोक्दछ जब तिनीहरूको 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. व्युत्पन्न डेटाको लागि memoized selectors प्रयोग गर्नुहोस् ```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/state-चालित अनुप्रयोगहरू मन्द हुनुको, र तिनीहरू स्टेट कसरी संरचित र सदस्यता गरिएको छ भन्ने तरबाट आउँदछन्। टूलकिट — संकीर्ण चुनिंदा सदस्यताहरू, विभाजित संदर्भहरू, स्थिर सन्दर्भहरूसँग memoization, अपरिवर्तनीय अपडेटहरू, र स्थानीयकृत स्टेट — पुन:रेन्डरिङ दायरा सीधा नियन्त्रण गर्दछ। महत्त्वपूर्ण रूपमा, तपाईंले **मापन** गर्नु पर्छ (Profiler) वास्तविक बोतलनेक पत्ता लगाउन अप्टिमाइज गर्नु अघि, किनकि असावधान memoization लाभ बिना जटिलता थप्दछ। के ट्रिगर गर्दछ पुन:रेन्डरिङ र तिनीहरूलाई कसरी समात्न सकिन्छ भन्ने कुरा बुझ्न प्रदर्शन योग्य ठूलो-मात्रा अनुप्रयोगहरूको लागि आवश्यक छ।