તમારે React Key Prop ની જરૂર કેમ છે
તમે તમારા કન્સોલમાં આ ચેતવણી જુઓ છો: "Each child in a list should have a unique 'key' prop."
ઘણા ડેવલપર્સ તેને અવગણે છે. આ એક ભૂલ છે. key prop માત્ર એક ચેતવણી નથી. તે પરફોર્મન્સ અને બગ (bug) નિવારણ માટેનું એક સાધન છે.
key prop શું કરે છે? React લિસ્ટ આઇટમ્સને ઓળખવા માટે key નો ઉપયોગ કરે છે. તે React ને જણાવે છે કે કઈ આઇટમ બદલાઈ છે, ખસી છે અથવા દૂર કરવામાં આવી છે.
key વગર, React એ આખી લિસ્ટને ફરીથી re-render કરવી પડે છે. આ તમારા એપને ધીમી કરે છે અને ડેટામાં બગ્સ (bugs) પેદા કરે છે.
લાઇબ્રેરીનું ઉદાહરણ ૧,૦૦૦ પુસ્તકો ધરાવતી એક લાઇબ્રેરીની કલ્પના કરો. જો તમે વચ્ચે એક નવું પુસ્તક ઉમેરો છો, તો જગ્યા બનાવવા માટે તમારે બાકીના દરેક પુસ્તકને ખસેડવું પડશે.
React માં, key એક યુનિક ID તરીકે કામ કરે છે. તે દરેક એલિમેન્ટને એક ઓળખ આપે છે. reconciliation પ્રક્રિયા દરમિયાન, React નવી લિસ્ટની જૂની લિસ્ટ સાથે સરખામણી કરે છે.
Key ન હોવાને કારણે થતી સમસ્યા જો તમે key છોડી દો છો, તો React ને લાગે છે કે દરેક આઇટમ સમાન છે. જો તમે શરૂઆતમાં એક આઇટમ ઉમેરો છો, તો React ને લાગે છે કે આખી લિસ્ટ બદલાઈ ગઈ છે. તે DOM માં દરેક એલિમેન્ટને ફરીથી બનાવે છે. આનાથી મેમરી અને CPU નો બગાડ થાય છે.
The Index Trap
નવા ડેવલપર્સ ઘણીવાર array index નો key તરીકે ઉપયોગ કરે છે.
Example: key={index}
ડાયનેમિક લિસ્ટ માટે આ જોખમી છે. જો તમે આઇટમ્સને sort, filter અથવા delete કરો છો, તો index બદલાઈ જાય છે. આનાથી ખોટા UI સ્ટેટ્સ અને બગ્સ સર્જાય છે.
Best Practices for Keys
- તમારા ડેટાબેઝમાંથી સ્ટેબલ IDs નો ઉપયોગ કરો (જેમ કે user.id).
- ખાતરી કરો કે siblings વચ્ચે keys યુનિક હોય.
- key તરીકે Math.random() નો ઉપયોગ કરવાનું ટાળો. તે દરેક render વખતે બદલાય છે અને UI flickering પેદા કરે છે.
- જો તમારા ડેટામાં ID ન હોય, તો ડેટા ફેચ (fetch) કરતી વખતે uuid અથવા nanoid નો ઉપયોગ કરીને એક ID જનરેટ કરો.
Key Selection Guide
• Database ID: શ્રેષ્ઠ. અત્યંત સ્ટેબલ અને ઝડપી. • Array Index: ફક્ત એવી સ્ટેટિક લિસ્ટ માટે ઉપયોગ કરો જે ક્યારેય બદલાતી નથી. • Math.random(): ટાળો. તે બિનજરૂરી re-mounts માટે મજબૂર કરે છે.
Summary એક સારી key તમારી એપને ઝડપી બનાવે છે. તે બિનજરૂરી re-renders માં 40% સુધીનો બચાવ કરી શકે છે. હંમેશા સ્ટેબલ અને યુનિક આઇડેન્ટિફાયર્સને પ્રાધાન્ય આપો.