reactjs / reactjs/react.dev

Possible bug in hooks sample code

Aberta
#1,455 0 comentários 0 reações 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

In this section:
https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

  const handleSubmit = useEventCallback(() => {
    alert(text);
  }, [text]);

Where useEventCallback is:

function useEventCallback(fn, dependencies) {
  const ref = useRef(() => {
    throw new Error('Cannot call an event handler while rendering.');
  });

  useLayoutEffect(() => {
    ref.current = fn;
  }, [fn, ...dependencies]);

  return useCallback(() => {
    const fn = ref.current;
    return fn();
  }, [ref]);
}

Which means useLayoutEffect() is re-run each time fn changes.
Since fn in the example is re-created on each render it means that useLayoutEffect() always re-runs.
But at the same time the fn function can't be not created on each render because it depends on text which is re-defined on each render.

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 seção vinculada da Hooks FAQ e inspecionando o exemplo de useEventCallback, especialmente suas dependências de useLayoutEffect e useCallback. Confirme se o exemplo se comporta conforme documentado e, em seguida, atualize o exemplo ou sua explicação para que o comportamento pretendido e os critérios de conclusão fiquem claros.

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
Bug
Dificuldade
3/5
Tempo estimado
1-2 dias
Status de atividade
Estagnada
Clareza
Precisa de esclarecimento
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.