Learning React: Atributul key={}

Mă tot gândeam: cum ar fi să scriu câte un articol despre lucrurile de care m-am lovit învățând React? Prin urmare, ăsta este primul post. Dacă or mai veni altele sau nu… vedem.

Atunci când randezi un element într-un loop (map, forEach), este recomandat să îi adaugi acelui element un atribut numit key. Acesta nu va fi trimis în props copiilor și este folosit exclusiv de React pentru diverse chestii (gen update).

Greșeala nr. 1: index key

Prima greșeală făcută de mine a fost să folosesc index-ul din loop pentru key. Ceva de genul:

lista.map((el, index) => <div key={index} />)

Rezultatul? Când actualizam props… unele elemente randate rămâneau neschimbate. Câteva ore mai târziu m-am prins și de ce: cheile ar trebui să fie unice! Prin urmare, am purces să fac….

Greșeala nr. 2: random key

A doua greșeală a fost să presupun că un key random este în regulă:

lista.map((el, index) => <div key={index + Date.now()} />)

Chiar dacă merge, vor fi probleme de performanță. De ce? Pentru că schimbarea unui singur element din listă va duce la re-randarea tuturor elementelor. Ouch!

Sigur, la 10-20 elemente nu ar trebui să fie probleme, dar la 1-200?

Greșeala nr. 3: prefix

La un moment dat am făcut ceva greșit și am rămas cu impresia că aceste key trebuie să fie unice în aplicație. Lucru cât se poate de fals, ele ar trebui să fie unice în părinte.

Dar până să mă prind de chestia asta, am pus mereu un prefix. Aveam aplicația plină de key={`users-${user.id}`}. Nu neapărat rău, dar inutil de verbose.

Cum ar trebui sa fie de fapt?

Dacă citeam cu atenție documentația, aflam că, în cazul ideal, te folosești de id-ul fiecărui element. Pentru că ghici ce? Cel mai probabil elementele alea vin din DB unde … au un ID! Abia în cazul în care nu au un ID te folosești de index!

Bonus: map, forEach, reduce, filter

Indiferent dacă ai sau nu de gând să folosești React, îți recomand două lucruri:

1. Migrează pe ES6. Sunt o grămadă de lucruri care îți fac viața mai ușoară: spread operator, destructuring, arrow functions, let/const, module etc. Chiar dacă adaugă un pas de compilare, merită efortul.
2. Chiar dacă te încăpățânezi să nu o faci, încearcă să înțelegi cum se folosesc toate funcțiile de manipulare arrays. Spre deosebire de PHP, folosirea funcțiilor native îți va aduce un plus de performanță. În plus, arată și mai bine 🙂 Iată două exemple:

const invoiceNumbers = invoices.map(invoice => invoice.number)

// sau

var invoiceNumbers = [];
for (var i = 0; i < invoices.length; i++) {
  invoiceNumbers.push(invoices[i].number)
}

const invoicesGreaterThan = invoices.filter(invoice => invoice.value > 1000)

// sau

var invoicesGreaterThan = [];

for (var i = 0; i < invoices.length; i++) {
  if (invoices[i].value > 1000) {
    invoicesGreaterThan.push(invoices[i])
  }
}