TL; DR Use chaves únicas e constantes ao renderizar filhos dinâmicos ou espere que coisas estranhas aconteçam.
Um dos aspectos complicados que descobri durante as poucas semanas que tenho usado React.js é entender a keypropriedade que você deve passar para um componente quando ele faz parte de uma matriz de filhos. Não é que você precise especificar essa propriedade, as coisas funcionarão na maioria das vezes, exceto por este aviso no console:
Cada filho em uma matriz deve ter um suporte de “chave” exclusivo. Verifique o método de renderização de indefinido. Consulte http://fb.me/react-warning-keys para obter mais informações.
Ao ler a documentação vinculada, pode ser fácil não ver as implicações desta afirmação:
Quando o React reconcilia os filhos com chave, ele garante que qualquer filho com chave seja reordenado (em vez de destruído) ou destruído (em vez de reutilizado).
No início, parecia que era tudo sobre performance, mas, como Paul O’Shannessy apontou, na verdade é sobre identidade .
A chave aqui é entender que nem tudo no DOM tem uma representação no React “Virtual DOM” e, porque as manipulações diretas do DOM (como um usuário alterando um <input>valor ou um plugin jQuery ouvindo um elemento) são despercebidas pelo React , não usando chaves únicas e constantes terminarão com React recriando o nó DOM de um componente quando a chave não é constante (e perdendo qualquer estado não rastreado no nó) ou reutilizando um nó DOM para renderizar outro componente quando a chave não é única (e amarrando seu estado para este outro componente).
Aqui você tem uma demonstração ao vivo mostrando como os resultados são terríveis:
http://jsfiddle.net/frosas/S4Dju/
Basta adicionar um item, alterá-lo, adicionar mais itens e ver o que acontece.