તમે સ્ટેટ અપડેટ્સને અતિશય પુનः-રેન્ડરિંગ થেવાથી કેવી રીતે રોકી શકો છો?

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 પસંદગીકર્તાઓ, Jotai અણુઓ) એક જ સૌથી મોટી લીવર છે — ઘટક માત્ર ત્યારે જ પુનः-રેન્ડર કરે છે જ્યારે તેમનો ચોક્કસ સ્લાઈસ બદલાય છે, દરેક સ્ટોર અપડેટ પર નહીં. ## 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 ``` મેમોઇઝેશન બાળકોને તેમના પ્રોપ્સ (સંદર્ભ દ્વારા) બદલાયો ન હોય ત્યારે પુનः-રેન્ડર થવાથી રોકે છે — પરંતુ તે ફક્ત ત્યારે કાર્ય કરે છે જો તમે સ્થિર પ્રોપ્સ/કૉલબેક્સ (તેથી `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) જોઈએ, કારણ કે અવિચારી મેમોઇઝેશન લાભ વિના જટિલતા ઉમેરે છે. પુનः-રેન્ડરિંગ શું ટ્રિગર કરે છે અને તેને કેવી રીતે સમાયોજિત કરવું તે સમજવું મોટા પ્રમાણે કામગીર બાબત એપ્લિકેશનો માટે આવશ્યક છે.