Warum braucht React einen Key an Listen-Items, und was geht tatsächlich kaputt, wenn du den Array-Index nimmst?

Keys sagen React, welches Element der neuen Liste welchem der alten entspricht, damit es DOM-Nodes und ihren State verschieben, behalten oder entfernen kann, statt rein nach Position zu paaren. Array-Indizes funktionieren nur bei statischen Listen. Werden Items umsortiert, vorne eingefügt oder gelöscht, ändert sich der Index eines Items, React wiederverwendet die falsche Node, und State wie Eingabewerte landet in der falschen Zeile.

Ein Key ist Reacts Antwort auf die Frage: Ist das dasselbe Item, das ich letzten Render gesehen habe? Ohne Key paart es Children nach Position, wenn also eine Zeile umzieht, denkt React, der Inhalt hat sich geändert, und patcht die bestehende Node, statt sie zu verschieben. Mit einem stabilen Key weiß es, dass das Item umgezogen ist, behält DOM-Node und State und sortiert um. Die Index-Falle ist, dass ein Index die Position beschreibt, nicht das Item. Mir ist das bei einer Tabelle passiert, in der jede Zeile eine Checkbox und ein Notizfeld hatte. Lösch Zeile zwei, und jede Zeile darunter rutscht einen Index hoch, React paart die falschen Nodes, und plötzlich stehen fremde Notizen in deiner Zeile. Es sieht aus wie ein Datenbug und ist ein Key-Bug. Ich nehme deshalb, was immer an stabiler ID mit den Daten kommt, meistens die Datenbank-ID. Gibt es wirklich keine, erzeuge ich eine ID beim Anlegen des Items und nicht während des Renders, denn im Render erzeugt bekommst du bei jedem Durchgang einen neuen Key und mountest die ganze Liste neu.