Chiavi React, sì! Ne avete bisogno, ma perché esattamente?

C'è anche un'altra cosa di cui bisogna tenere conto, ossia la React Chiave ogni elemento dell'elenco reso deve averlo. Questo concetto è una delle prime cose che ogni sviluppatore di front-end impara a conoscere. React all'inizio del loro viaggio. Ora scaviamo un po' più a fondo per capire perché è così e quando possiamo prendere delle scorciatoie.

Perché abbiamo bisogno di questo attributo chiave?

La risposta più semplice sarebbe "per ottimizzare i re-renders", ma quella più completa deve almeno menzionare il concetto di React Riconciliazione. Si tratta di capire come aggiornare l'interfaccia utente nel modo più efficiente. Per farlo velocemente, React deve decidere quali parti dell'albero degli elementi devono essere aggiornate e quali no. Il problema è che ci possono essere molti elementi nel DOM e confrontare ciascuno di essi per decidere quale deve essere aggiornato è piuttosto costoso. Per ottimizzare questo aspetto, React implementa l'algoritmo di diffing che si basa su due ipotesi:

1. Due tipi diversi di elementi non saranno mai uguali, quindi renderizzateli nuovamente.
2. Gli sviluppatori possono contribuire manualmente a ottimizzare questo processo tramite gli attributi chiave, in modo che gli elementi, anche se il loro ordine è cambiato, possano essere localizzati e confrontati più rapidamente.

Sulla base di ciò, possiamo concludere che ogni Chiave React devono essere unici (all'interno dell'elenco di elementi, non a livello globale) e stabili (non devono cambiare). Ma cosa può succedere quando non sono stabili?

Unicità, stabilità e indice dell'array

Come abbiamo già detto, Tasti React deve essere stabile e unico. Il modo più semplice per ottenere questo risultato è usare un ID univoco (per esempio da un database) e passarlo a ogni elemento quando si mappa un array. Ma cosa succede quando non abbiamo un ID, un nome o altri identificatori unici da passare a ogni elemento? Beh, se non passiamo nulla come chiave, React prenderà l'indice dell'array corrente per impostazione predefinita (poiché è unico all'interno dell'elenco) per gestirlo al posto nostro, ma ci darà anche un bel messaggio di errore nella console:

Perché? La risposta è che l'indice dell'array non è stabile. Se l'ordine degli elementi cambia, ciascuna delle chiavi cambierà e si verificherà un problema. Se React incontra una situazione in cui l'ordine in un elenco di elementi è stato cambiato, cercherà comunque di confrontarli in base alle chiavi, il che significa che ogni confronto finirà per ricostruire un componente e, di conseguenza, l'intero elenco verrà ricostruito da zero. Inoltre, si possono verificare alcuni problemi inaspettati, come l'aggiornamento dello stato dei componenti per elementi come ingressi non controllati e altri problemi magici difficili da analizzare.

Eccezioni

Torniamo all'indice dell'array. Se lo si usa come indice Chiave React può essere così problematico, perché React lo utilizzerà in modo predefinito? C'è qualche caso d'uso in cui è giusto farlo? La risposta è sì, il caso d'uso è quello degli elenchi statici. Se si è sicuri che l'elenco che si sta rendendo non cambierà mai il suo ordine, è sicuro usare l'indice dell'array, ma ricordate che se avete degli identificatori unici, è sempre meglio usarli al loro posto. Si può anche notare che passare gli indici come chiavi renderà il metodo React scompare il messaggio di errore, ma contemporaneamente alcuni dei linters esterni visualizzano un errore o un avvertimento. Questo è dovuto al fatto che l'uso esplicito di indici come chiavi è considerato una cattiva pratica e alcuni linters potrebbero trattarlo come un errore, mentre React La stessa considera questa situazione come un "gli sviluppatori sanno cosa stanno facendo", quindi non fatelo a meno che non sappiate davvero cosa state facendo. Alcuni esempi di quando può andare bene usare questa eccezione sono una tendina con un elenco statico di pulsanti o la visualizzazione di un elenco di elementi con le informazioni sull'indirizzo dell'azienda.

Un'alternativa alla chiave basata sul set di dati

Supponiamo che nessuna di queste opzioni sia adatta a noi. Per esempio, dobbiamo visualizzare un elenco di elementi basato su un array di stringhe che può essere duplicato, ma anche riordinato. In questo caso, non possiamo usare nessuna delle stringhe perché non sono uniche (questo può causare anche qualche bug magico) e l'indice dell'array non è sufficiente perché cambieremo l'ordine degli elementi. L'ultima cosa su cui possiamo fare affidamento in situazioni come questa è l'uso di alcuni identificatori esterni. Ricordate che deve essere stabile, quindi non possiamo limitarci a Math.random(). Ci sono alcuni pacchetti NPM che possiamo usare in questi casi, per esempio il pacchetto "uuid" pacchetto. Strumenti come questo possono aiutarci a mantenere stabili e uniche le chiavi dei nostri elenchi, anche quando non riusciamo a trovare identificatori adeguati all'interno del nostro set di dati. Dovremmo considerare di usare prima l'ID del database e l'indice dell'array (se possibile), per ridurre al minimo il numero di pacchetti utilizzati dal nostro progetto.

Per concludere

• Ogni elemento dell'elenco di React deve avere un attributo chiave unico e stabile,
• Tasti React sono utilizzati per accelerare la Processo di riconciliazione ed evitare di ricostruire inutilmente gli elementi degli elenchi,
• La fonte migliore per le chiavi è l'ID univoco di inserimento dati (ad esempio, dal database),
• È possibile utilizzare l'indice dell'array come chiave, ma solo per un elenco statico il cui ordine non cambierà,
• Se non c'è altro modo per ottenere chiavi stabili e univoche, si può prendere in considerazione l'uso di alcuni fornitori esterni di ID, ad esempio il pacchetto "uuid".

Per saperne di più:

Perché si dovrebbe (probabilmente) usare Typescript

Come non uccidere un progetto con cattive pratiche di codifica?

Strategie di recupero dei dati in NextJS