Why You Need the React Key Prop
તમે તમારા કન્સોલમાં આ ભૂલ જુઓ છો: "Each child in a list should have a unique 'key' prop."
ઘણા ડેવલપર્સ તેને અવગણે છે. આ એક ભૂલ છે. આ ચેતવણી તમને પરફોર્મન્સની સમસ્યાઓ અને સંભવિત બગ્સ વિશે જણાવે છે.
What is a key prop? તે React ને લિસ્ટમાં ચોક્કસ આઇટમ્સ ઓળખવામાં મદદ કરે છે. તે React ને જણાવે છે કે કઈ આઇટમ બદલાઈ છે, ખસી છે અથવા દૂર કરવામાં આવી છે. key વગર, જ્યારે પણ કંઈપણ બદલાય છે ત્યારે React આખી લિસ્ટને ફરીથી re-render કરે છે. આનાથી તમારું એપ ધીમું પડે છે.
૧૦૦૦ પુસ્તકો ધરાવતી લાઇબ્રેરી વિશે વિચારો. જો તમે વચ્ચે એક નવું પુસ્તક ઉમેરો છો, તો જગ્યા બનાવવા માટે તમારે બીજા દરેક પુસ્તકને ખસેડવું પડશે. key દરેક પુસ્તક માટે એક યુનિક ID તરીકે કામ કરે છે. તે બાકીની બધી વસ્તુઓને ખસેડ્યા વિના React ને ચોક્કસ જગ્યા શોધવામાં મદદ કરે છે.
The Reconciliation Process React નવા Virtual DOM ની જૂના સાથે સરખામણી કરવા માટે diffing algorithm નો ઉપયોગ કરે છે.
- State બદલાય છે.
- React નવું tree બનાવે છે.
- React keys નો ઉપયોગ કરીને trees ની સરખામણી કરે છે.
- React ફક્ત બદલાયેલા elements ને જ અપડેટ કરે છે.
The common mistake: Using array index as a key.
જો તમારી લિસ્ટ બદલાતી હોય તો ક્યારેય key={index} નો ઉપયોગ કરશો નહીં. જો તમે આઇટમ્સ ઉમેરો છો અથવા ડિલીટ કરો છો, તો દરેક આઇટમનો index બદલાઈ જાય છે. React મૂંઝવણમાં મુકાશે અને તે આઇટમ્સને ફરીથી re-render કરશે જે ખરેખર બદલાઈ નથી. આનાથી મેમરીનો બગાડ થાય છે અને UI bugs આવે છે.
How to fix it:
- તમારા ડેટાબેઝમાંથી એક સ્ટેબલ ID નો ઉપયોગ કરો (જેમ કે
user.id). - જો તમારા ડેટામાં ID ન હોય તો
uuidજેવી યુનિક સ્ટ્રિંગનો ઉપયોગ કરો. - Keys માટે
Math.random()નો ઉપયોગ ટાળો. તે દરેક render પર એક નવું ID બનાવે છે, જેના કારણે components ને ફરીથી re-mount કરવા પડે છે અને UI flickering થાય છે.
Best practices:
- Keys સ્ટેબલ હોવી જોઈએ.
- Keys સબલિંગ્સ (siblings) વચ્ચે યુનિક હોવી જોઈએ.
- શ્રેષ્ઠ પરફોર્મન્સ માટે ડેટાબેઝ IDs નો ઉપયોગ કરો.
Key Comparison Table: • Database ID: ભલામણ કરવામાં આવે છે. સ્ટેબલ અને ઝડપી. • Array Index: ભલામણ કરવામાં આવતી નથી. Sorting અથવા filtering દરમિયાન bugs પેદા કરે છે. • Math.random(): ટાળો. બિનજરૂરી re-mounts પેદા કરે છે.
Summary for your workflow: જો તમે ભૂલ જુઓ છો, તો તમારા components માં કાયમી ઓળખકર્તા (identifier) નો અભાવ છે. તમારા API response માં email અથવા ID જેવા યુનિક ફીલ્ડ્સ તપાસો. બિનજરૂરી re-renders માં ૩૦-૪૦% બચાવવા માટે આ સુધારો કરો.