Calling state setter with same value doesn't reliably work as documented

Aberta Para iniciantes
#5,215 0 comentários 9 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
1/5
Tempo estimado
Menos de uma hora
Facilidade para iniciantes
68/100
Tipo de issue
Documentação
Clareza
Claramente especificada
Status de atividade
Estagnada
Stack de tecnologia
javascript, react
Domínio
documentation

Direção de pesquisa

Comece pela seção “functional updates” da documentação vinculada de useState e revise a afirmação sobre valores de estado idênticos. Atualize a redação para explicar que a função do componente pode ser chamada na primeira atualização para o mesmo valor, enquanto a renderização novamente subsequente é ignorada; a alteração estará concluída quando a documentação não implicar mais que a função é sempre um no-op.

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

Descrição

Thank you for the very high standard of documentation on the React website.

There's a bit that's slightly misleading, though. The "functional updates" section of the useState documentation says:

If your update function returns the exact same value as the current state, the subsequent rerender will be skipped completely.

However, if you watch calls to the component function doing the state update, it seems like a render occurs the first time you do that, because the component function gets called that first time. (Once it returns a bail-out means child components aren't called to rerender.) Subsequent times the component sets the same state value, even the component function isn't called (because of a separate "fast" bail-out).

That first time looks like a render to a dev who's read the documentation and expected setting the same value to be a no-op. That's confusing enough to have made @amsterdamharu file this closed bug report and to have made me, independently, come to github to write a bug report as well (but fortunately I found that one first).

Perhaps:

If your update function returns the exact same value as the current state, the subsequent rerender will be skipped completely (although the component function may be called, at least the first time).

...or something like that.

Then when developers see our component function get called even though we did setValue((v) => v);, we'll know it isn't a bug or our misunderstanding something; it's just part of the complexity of React (and there's probably a good reason for it).

Thanks.

Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
16h 6min
PRs com merge (30d)
7

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.

Mais de reactjs/react.dev

Todas as issues de reactjs/react.dev

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

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