જ્યારે React 'Re-render' કહે છે, ત્યારે તેનો અર્થ ત્રણ વસ્તુઓ થાય છે

જ્યારે તમે setState ને કોલ કરો છો, ત્યારે React ફક્ત DOM ને અપડેટ નથી કરતું. તે એક ક્રમમાં ત્રણ અલગ-અલગ તબક્કાઓ (phases) ચલાવે છે. મોટાભાગના ડેવલપર્સ આ તબક્કાઓમાં મૂંઝવણ અનુભવે છે. આ તફાવત સમજવાથી તમને પરફોર્મન્સની સમસ્યાઓ ઉકેલવામાં મદદ મળે છે.

ત્રણ તબક્કાઓ:

• Render: React તમારા component function ને કોલ કરે છે. • Reconcile: React નવા આઉટપુટની જૂના આઉટપુટ સાથે સરખામણી કરે છે. • Commit: React DOM માં ફેરફારો લાગુ કરે છે.

  1. The Render Phase

React તમારા function ને રન કરે છે. તે વર્તમાન props નો ઉપયોગ કરે છે. function JSX રિટર્ન કરે છે. આ JSX માત્ર JavaScript objects ની એક યાદી છે. લોકો તેને virtual DOM કહે છે. તે સાચું (real) DOM નથી. તે UI કેવું દેખાવું જોઈએ તેનું વર્ણન છે. હજી સુધી સ્ક્રીન પર કંઈ દેખાતું નથી. આ તબક્કો સંપૂર્ણપણે ગણિત અને લોજિક પર આધારિત છે.

  1. The Reconcile Phase

React જૂના tree અને નવા tree ને સાચવી રાખે છે. તે તેમની વચ્ચેના તફાવતો શોધે છે. જો element type બદલાય છે, તો React આખું tree બદલી નાખે છે. જો ફક્ત props બદલાય છે, તો React તેને અપડેટ કરે છે. અહીં keys મહત્વના છે. Keys React ને લિસ્ટમાં વસ્તુઓને તેમની પોઝિશનને બદલે ઓળખ (identity) દ્વારા મેચ કરવામાં મદદ કરે છે. આ તબક્કો DOM ને અપડેટ કરવા માટે જરૂરી લઘુત્તમ સ્ટેપ્સની યાદી બનાવે છે.

  1. The Commit Phase

React ફેરફારોની યાદી લે છે અને real DOM ને સ્પર્શે છે. તે નવા nodes બનાવે છે અને જૂનાને દૂર કરે છે. આ સમયે જ યુઝર્સ સ્ક્રીન પર ફેરફારો જોઈ શકે છે. આ પછી, બ્રાઉઝર સ્ક્રીન પર પેઇન્ટ કરે છે. ત્યારબાદ, useEffect રન થાય છે.

સામાન્ય ગેરસમજો:

• એક re-render હંમેશા DOM ને બદલતું નથી. જો આઉટપુટ સમાન હોય, તો React commit phase માં કંઈ જ કરતું નથી. • React.memo function call ને સ્કીપ કરે છે. તે DOM update ને સ્કીપ કરતું નથી. • Props re-renders ટ્રિગર કરતા નથી. પેરેન્ટનું re-rendering ચાઇલ્ડને ટ્રિગર કરે છે. Prop માં ફેરફાર એ માત્ર તેનું પરિણામ છે.

પરફોર્મન્સ કેવી રીતે સુધારવું:

જો તમારું function ધીમું હોય, તો તમારી પાસે Render ની સમસ્યા છે. ભારે કામ function ની બહાર લઈ જાઓ અથવા memoization નો ઉપયોગ કરો.

જો React વિશાળ લિસ્ટ ફરીથી બનાવે છે, તો તમારી પાસે Reconcile ની સમસ્યા છે. તમારી keys તપાસો.

જો DOM ખૂબ વધારે અપડેટ થાય છે, તો તમારી પાસે Commit ની સમસ્યા છે. virtualization નો ઉપયોગ કરો અથવા તમારા સ્ટ્રક્ચરમાં ફેરફાર કરો.

React 19 અને React Compiler હવે તમારા માટે આમાંથી ઘણું કામ સંભાળી લે છે. પરંતુ આ તબક્કાઓ જાણવાથી તમને વધુ સારી રીતે debug કરવામાં મદદ મળે છે.

Source: https://dev.to/dip_032d2fe1959e1990ddbb1/when-react-says-re-render-it-actually-means-three-things-11d7