React: useCallback devuelve undefined cuando el componente se procesa en el lado del servidor

Creado en 15 nov. 2018  ·  4Comentarios  ·  Fuente: facebook/react

¿Quieres solicitar una función o informar de un error ?

Bicho.

¿Cuál es el comportamiento actual?

React.useCallback devuelve undefined cuando el componente se procesa en el lado del servidor.

Si el comportamiento actual es un error, proporcione los pasos para reproducir y, si es posible, una demostración mínima del problema. Pegue el enlace a su JSFiddle (https://jsfiddle.net/Luktwrdm/) o CodeSandbox (https://codesandbox.io/s/new) ejemplo a continuación:

Este error se puede reproducir creando un componente React usando useCallback . Registrar el valor de retorno en el servidor produce undefined mientras devuelve correctamente la función en el navegador.

Puede observar este error en este CodeSandbox: https://codesandbox.io/s/r557kww6wn La aplicación se representa correctamente a un error de cadena mirando la consola, verá que el valor de retorno de useCallback es undefined .

Aquí está exactamente la misma aplicación pero renderizada en el cliente: https://codesandbox.io/s/xvwv797pxz La función está registrada correctamente en la consola.

¿Cuál es el comportamiento esperado?

React.useCallback debe devolver la devolución de llamada memorizada, no undefined .

¿Qué versiones de React y qué navegador / sistema operativo se ven afectados por este problema?

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

Comentario más útil

Creo que esto es un error; ese comentario de código es incorrecto. Tengo entendido que es correcto usar useCallback para las devoluciones de llamada de la fase de procesamiento.

Todos 4 comentarios

Este es un comportamiento intencional.

Las devoluciones de llamada no se ejecutan en el entorno del servidor.

Supongo que la razón es que dado que las devoluciones de llamada son para usar con controladores de eventos como onClick , que no son significativos durante SSR, React realmente no necesita realizar un seguimiento de ellos, liberando recursos que se usarían innecesariamente al realizar un seguimiento de los ganchos que nunca se utilizarían.

No se preocupe, cuando se rehidrate, las devoluciones de llamada estarán ahí.

Pero, ¿puedo preguntar qué está tratando de hacer exactamente?

Gracias @arianon 👌 Estaba siguiendo la sugerencia de redux-react-hook de usar useCallback con su useMappedState . Conceptualmente, la función que estoy memorizando no es realmente una devolución de llamada. No presté atención a eso al principio porque el término tiende a usarse en una variedad de contextos. Además, la documentación menciona que:

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

Abriré un problema en el repositorio de documentos para sugerir una actualización 😉 ¡Gracias de nuevo!

Creo que esto es un error; ese comentario de código es incorrecto. Tengo entendido que es correcto usar useCallback para las devoluciones de llamada de la fase de procesamiento.

AFAICT, las únicas cosas que no deberían ejecutarse en el lado del servidor son los efectos y la inicialización del atributo ref. Un useCallback funcional es importante, por ejemplo, para el patrón HOC de prop de renderizado, que seguirá estando en el ecosistema durante mucho tiempo.

¿Fue útil esta página
0 / 5 - 0 calificaciones