A Importância das Keys

Cada elemento retornado de map precisa de uma key, um rótulo estável e único para aquele item:

{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}

Por quê? Quando o array muda, o React compara a nova lista com a antiga. As chaves dizem a ele qual item é qual, para que ele mova os elementos em vez de reconstruí-los, mantendo o estado, o foco e as animações intactos.

Melhor key: um id real dos seus dados. Aceitável: qualquer valor único e estável por item (como nossos nomes de frutas). Último recurso: o índice do array. Isso quebra a reordenação, porque posição não é identidade.