React: useCallback retorna indefinido quando o componente é renderizado do lado do servidor

Criado em 15 nov. 2018  ·  4Comentários  ·  Fonte: facebook/react

Você quer solicitar um recurso ou relatar um bug ?

Inseto.

Qual é o comportamento atual?

React.useCallback retorna undefined quando o componente é renderizado do lado do servidor.

Se o comportamento atual for um bug, forneça as etapas para reproduzir e, se possível, uma demonstração mínima do problema. Cole o link para o seu exemplo JSFiddle (https://jsfiddle.net/Luktwrdm/) ou CodeSandbox (https://codesandbox.io/s/new) abaixo:

Este bug pode ser reproduzido criando um componente React usando um useCallback . Registrar o valor de retorno no servidor resulta em undefined enquanto retorna a função no navegador de maneira adequada.

Você pode observar esse bug neste CodeSandbox: https://codesandbox.io/s/r557kww6wn O aplicativo é renderizado corretamente para um bug de string olhando para o console, você verá que o valor de retorno de useCallback é undefined .

Aqui está exatamente o mesmo aplicativo, mas renderizado no cliente: https://codesandbox.io/s/xvwv797pxz A função está devidamente registrada no console.

Qual é o comportamento esperado?

React.useCallback deve retornar o retorno de chamada memorizado, não undefined .

Quais versões do React e quais navegadores / sistemas operacionais são afetados por esse problema?

  • reagir: 16.7.0-alpha.2
  • react-dom: 16.7.0-alpha.2
Hooks Bug

Comentários muito úteis

Eu acredito que isso é um bug; esse comentário de código está errado. Meu entendimento é que é correto usar useCallback para retornos de chamada de fase de renderização.

Todos 4 comentários

Este é um comportamento intencional.

Callbacks não são executados no ambiente do servidor.

Presumo que o raciocínio é que, como os retornos de chamada são para uso com manipuladores de eventos como onClick , que não são significativos durante o SSR, o React realmente não precisa acompanhá-los, liberando recursos que seriam usados desnecessariamente, rastreando os ganchos que nunca seriam usados.

Não se preocupe, ao reidratar, os retornos de chamada estarão lá.

Mas, posso perguntar o que exatamente você está tentando fazer?

Obrigado @arianon 👌 Eu estava seguindo a sugestão do redux- react useCallback com seu useMappedState . Conceitualmente, a função que estou memorizando não é realmente um retorno de chamada. Não prestei atenção a isso no início porque o termo tende a ser usado em uma variedade de contextos. Além disso, a documentação menciona que:

useCallback(fn, inputs) é equivalente a useMemo(() => fn, inputs) .

Vou abrir um problema no repositório docs para sugerir uma atualização 😉 Obrigado novamente!

Eu acredito que isso é um bug; esse comentário de código está errado. Meu entendimento é que é correto usar useCallback para retornos de chamada de fase de renderização.

AFAICT as únicas coisas que não devem ser executadas no lado do servidor são os efeitos e a inicialização do atributo ref. Um useCallback funcional é importante, por exemplo, para o padrão render prop HOC, que ainda estará com o ecossistema por um longo tempo.

Esta página foi útil?
0 / 5 - 0 avaliações