Kwa Nini Unahitaji React Key Prop
Unaona kosa hili kwenye console yako: "Each child in a list should have a unique 'key' prop."
Waendelezaji wengi huipuuza. Hili ni kosa. Onyo hili linakujulisha kuhusu matatizo ya utendaji (performance) na hitilafu (bugs) zinazoweza kutokea.
Key prop ni nini?
Inasaidia React kutambua vitu maalum katika orodha. Inaiambia React ni kitu gani kilichobadilika, kimesogezwa, au kimeondolewa. Bila key, React hufanya re-render ya orodha nzima kila wakati kitu chochote kinapobadilika. Hii inafanya programu yako iwe nzito.
Fikiria maktaba yenye vitabu 1000. Ukiongeza kitabu kipya katikati, lazima usogeze kila kitabu kingine ili kupata nafasi. Key hufanya kazi kama ID ya kipekee kwa kila kitabu. Inaruhusu React kupata sehemu husika bila kusogeza vitu vingine vyote.
Mchakato wa Reconciliation
React hutumia algorithm ya diffing kulinganisha Virtual DOM mpya na ile ya zamani.
- Hali (State) inabadilika.
- React inajenga mti (tree) mpya.
- React inalinganisha miti kwa kutumia keys.
- React inasasisha vipengele vilivyobadilika pekee.
Kosa la kawaida: Kutumia array index kama key.
Usitumie kamwe key={index} ikiwa orodha yako inabadilika. Ukiongeza au kufuta vitu, index ya kila kitu inasogea. React itachanganyikiwa na kufanya re-render ya vitu ambavyo havijabadilika kweli. Hii inapoteza kumbukumbu (memory) na kusababisha hitilafu za UI.
Jinsi ya kurekebisha:
- Tumia ID thabiti kutoka kwenye database yako (kama
user.id). - Tumia string ya kipekee kama
uuidikiwa data yako haina ID. - Epuka kutumia
Math.random()kwa ajili ya keys. Inatengeneza ID mpya kila wakati wa render, jambo ambalo linawalazimu components kufanya re-mount na kusababisha UI kuwaka na kuzima (flickering).
Mbinu bora:
- Keys lazima ziwe thabiti.
- Keys lazima ziwe za kipekee miongoni mwa ndugu (siblings).
- Tumia ID za database kwa utendaji bora zaidi.
Jedwali la Ulinganishi wa Key:
• Database ID: Inapendekezwa. Ni thabiti na ya haraka. • Array Index: Haipendekezwi. Inasababisha hitilafu wakati wa kupanga (sorting) au kuchuja (filtering). • Math.random(): Epuka. Inasababisha re-mounts zisizo za lazima.
Muhtasari kwa ajili ya mtiririko wako wa kazi:
Ukiona kosa hilo, vipengele (components) vyako vinakosa utambulisho wa kudumu. Angalia majibu ya API yako kwa ajili ya nyanja (fields) za kipekee kama email au ID. Rekebisha hili ili kuokoa 30-40% ya re-renders zisizo za lazima.