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?
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 auseMemo(() => 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.
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.