reactjs / reactjs/react.dev

It is a myth and misunderstanding the key={...} make the display correct

Aberta
#6,292 0 comentários 1 reação 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
1d 11h
PRs com merge (30d)
11

Descrição

On page https://react.dev/learn/rendering-lists

it is said that:

A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.

That's a myth that the key keeps the updates correct. It helps to make the update faster, so that it goes by row level diff'ing, instead of cell level diff'ing.

For example, if you have a table with 5 fields. They key can make it so that the diff'ing happens with the prev row, so that it is faster.

Imagine if row 23 supposedly needed to compare with row 24, due to row added or deleted, but due to the key being bad, it is compared to row 23, and all the fields are different, so React needs to update it cell by cell.

If the key is good, however, now row 23 will be compared with row 24, and nothing changes, and no update is needed whatsoever.

You can check with an advanced engineer about this. The myth about "you need a good key so that the displayed data is correct", is wrong.

Maybe the original line "make the correct updates to the DOM tree" doesn't suggest that, but it can make readers think this way. So you may want to rephrase it or further explain it.

So this part later in the page:

You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.

is also a wrong concept. It will NOT lead to subtle and confusing bugs. It will just make it slow, but the display will still all be correct.

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Comece lendo a página Rendering Lists em https://react.dev/learn/rendering-lists, incluindo as seções citadas sobre chaves e índices de arrays. Verifique as afirmações em relação ao comportamento documentado do React e determine se o texto precisa de esclarecimento; considera-se concluído quando uma explicação acordada e tecnicamente precisa estiver refletida nessa página.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
javascript, react
Domínio
documentation
Tipo de issue
Documentação
Dificuldade
4/5
Tempo estimado
3-5 dias
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
35/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.