{"id":3540,"date":"2021-07-24T08:53:39","date_gmt":"2021-07-24T08:53:39","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/react-keys-yes-you-need-them-but-why-exactly\/"},"modified":"2026-04-27T10:16:39","modified_gmt":"2026-04-27T10:16:39","slug":"reagire-alle-chiavi-si-ne-avete-bisogno-ma-perche-esattamente","status":"publish","type":"post","link":"https:\/\/thecodest.co\/it\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"Chiavi React, s\u00ec! Ne avete bisogno, ma perch\u00e9 esattamente?"},"content":{"rendered":"

C'\u00e8 anche un'altra cosa di cui bisogna tenere conto, ossia la React<\/a> Chiave<\/strong> ogni elemento dell'elenco reso deve averlo. Questo concetto \u00e8 una delle prime cose che ogni front-end sviluppatore<\/a> impara a conoscere React<\/strong> all'inizio del loro viaggio. Ora scaviamo un po' pi\u00f9 a fondo per capire perch\u00e9 \u00e8 cos\u00ec e quando possiamo prendere delle scorciatoie.<\/p>\n

Perch\u00e9 abbiamo bisogno di questo attributo chiave?<\/h2>\n

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

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

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

    Unicit\u00e0, stabilit\u00e0 e indice dell'array<\/h2>\n

    Come abbiamo gi\u00e0 detto, Tasti React<\/strong> deve essere stabile e unico. Il modo pi\u00f9 semplice per ottenere questo risultato \u00e8 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<\/strong> prender\u00e0 l'indice dell'array corrente per impostazione predefinita (poich\u00e9 \u00e8 unico all'interno dell'elenco) e lo gestir\u00e0 per noi<\/a>ma ci dar\u00e0 anche un bel messaggio di errore nella console:<\/p>\n

    \"\"<\/p>\n

    Perch\u00e9? La risposta \u00e8 che l'indice dell'array non \u00e8 stabile. Se l'ordine degli elementi cambia, ciascuna delle chiavi cambier\u00e0 e si verificher\u00e0 un problema. Se React<\/strong> incontra una situazione in cui l'ordine in un elenco di elementi \u00e8 stato cambiato, cercher\u00e0 comunque di confrontarli in base alle chiavi, il che significa che ogni confronto finir\u00e0 per ricostruire un componente e, di conseguenza, l'intero elenco verr\u00e0 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.<\/p>\n

    Eccezioni<\/h2>\n

    Torniamo all'indice dell'array. Se lo si usa come indice Chiave React<\/strong> pu\u00f2 essere cos\u00ec problematico, perch\u00e9 React<\/strong> lo utilizzer\u00e0 in modo predefinito? C'\u00e8 qualche caso d'uso in cui \u00e8 giusto farlo? La risposta \u00e8 s\u00ec, il caso d'uso \u00e8 quello degli elenchi statici. Se si \u00e8 sicuri che l'elenco che si sta rendendo non cambier\u00e0 mai il suo ordine, \u00e8 sicuro usare l'indice dell'array, ma ricordate che se avete degli identificatori unici, \u00e8 sempre meglio usarli al loro posto. Si pu\u00f2 anche notare che passare gli indici come chiavi render\u00e0 il metodo React<\/strong> scompare il messaggio di errore, ma contemporaneamente alcuni dei linters esterni visualizzano un errore o un avvertimento. Questo \u00e8 dovuto al fatto che l'uso esplicito di indici come chiavi \u00e8 considerato una cattiva pratica e alcuni linters potrebbero trattarlo come un errore, mentre React<\/strong> 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\u00f2 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.<\/p>\n

    Un'alternativa alla chiave basata sul set di dati<\/h2>\n

    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\u00f2 essere duplicato, ma anche riordinato. In questo caso, non possiamo usare nessuna delle stringhe perch\u00e9 non sono uniche (questo pu\u00f2 causare anche qualche bug magico) e l'indice dell'array non \u00e8 sufficiente perch\u00e9 cambieremo l'ordine degli elementi. L'ultima cosa su cui possiamo fare affidamento in situazioni come questa \u00e8 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\"<\/a> 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 pacchetto dati<\/a> set. Dovremmo considerare di usare prima l'ID del database e l'indice dell'array (se possibile), per ridurre al minimo il numero di pacchetti usati dal nostro progetto<\/a>.<\/p>\n

    Per concludere<\/h2>\n