[es6 React]React Render vraag

Stel ik heb twee components, Comparator en List; List render ik in Comparator als volgt:



1: Een List wordt altijd gerendered.
2: Voor ieder element in de array lists in de state van Comparator wordt een List gerendered.
3: Een knop die een element toegevoegd aan de array lists.

Nu merk ik dat wanneer ik op de knop druk en er een nieuw element toegevoegd wordt aan de array lists, en daarmee een nieuwe list gerendered zoals verwacht, alle voorgaande lists ook opnieuw gerendered worden. Dit kan ik zien in de React components tab in chrome doordat alle lists een nieuw uuid als key krijgen.

Ik dacht dat alleen componenten die daadwerkelijk verandert zijn opnieuw gerendered worden, en wat is de beste manier om hiermee om te gaan? En gebeurt dit opnieuw renderen alleen in de virtuele DOM?

quote:

Op zondag 29 september 2019 12:13 schreef BrainOverfloW het volgende:
Zo te lezen heb je een functie die een nieuw list item aan maakt en deze aan je lijst toe voegt waardoor de pagina opnieuw gaat renderen.
Zou je in deze functie niet het UUID toe kunnen wijzen i.p.v. via een functie die in je HTML zit? Dan heb je de UUID generatie losgekoppeld van je pagina renders en hoef je de gegenereerde UUID alleen nog in je key attribuut te zetten.

Zelf werk ik overigens niet met React dus mogelijk zie ik iets over het hoofd.
Mogelijk vindt je meer hulp in DIG / [HTML, CSS, JS] Frontend #45: topic nummer++

Nou de waarde van de uuid is voor mijzelf niet van belang, die heeft react nodig om in de virutele DOM onderling onderscheid te maken tussen repetities van componenten, ik kan er alleen wel aan zien dat de child components opnieuw gerendered worden wat ik niet verwacht had.

Had ik er bij moeten schrijven ja pardon, zal het in dat topic ook even vragen thanks.

quote:

Op zondag 29 september 2019 20:18 schreef Alfje het volgende:
Ik vermoed dat je redux gebruikt? Ik ben niet goed bekend met React dus weet niet of dat altijd moet of optioneel is. Wat ik denk dat er gebeurd is dat je een lijst aan een array toevoegt die in je redux store staat. Maar omdat de store immutable is, voeg je die lijst niet echt toe aan de array, maar genereer je een nieuw array met dezelfde items als die er al in stonden, plus die je net hebt toegevoegd. React ziet een nieuw array en rendered elk item in het array opnieuw omdat React niet weet dat al die lists (behalve de nieuwe) dezelfde zijn als die er al in stonden. Daar heb je dus die key voor nodig. Voeg een id veld toe aan je list model en gebruik die als key.

Nee ik gebruik nóg geen redux die komt pas aan het einde van de course.

Maar als ik maak idd wel kopieën ipv dat ik muteer, en als ik de kopieën een gelijke key mee zou geven zou dit ervoor zorgen dat ze niet opnieuw gerendered worden als ik het goed begrijp?

Oké dat lijkt te werken alleen kan ik de index niet als key gebruiken in de praktijk.

https://medium.com/@robin(...)pattern-e0349aece318

Kan zelf wel een functie schrijven dan die een uuid genereert maar ook vasthoud.