Recientemente comencé a crear ganchos personalizados en mi aplicación React y he estado siguiendo la documentación en el sitio web de React. Sin embargo, los ganchos que estoy construyendo no requieren valor de retorno ya que configuran datos para Redux en la inicialización.
Ejemplo:
// custom hook export const useSetup() { useEffect(() => { if (data) fetch().then(data => dispatch(setInit(data))) }, [dispatch]) } // functional component export function Details() { useSetup()No puedo encontrar documentación que indique explícitamente que un enlace debe devolver algo. Sin embargo, no puedo encontrar un ejemplo de un gancho que no devuelva algo. ¿Alguien puede aconsejar si este enfoque es correcto?
Sí, su enfoque es correcto. Los ganchos de reacción no están obligados a devolver nada. La documentación de React establece que:
No tenemos que devolver una función con nombre del efecto. Lo llamamos limpieza aquí para aclarar su propósito, pero podría devolver una función de flecha o llamarlo de otra manera.
El valor de retorno de una función que se pasa como argumento a un gancho tiene un uso especial en el ciclo de vida del componente React al que pertenece. Esencialmente, se espera que ese valor de retorno sea una función y se ejecute antes de que el componente con el enlace se vuelva a representar o se desmonte. La documentación de React llama a este tipo de gancho un "efecto con limpieza".
La documentación de React usa el siguiente ejemplo para mostrar cómo se ve un gancho useEffect :
const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }); Como puede ver, la función anónima que se usa como argumento para useEffect no tiene una declaración de return .
Puede verificar esto cambiando un poco la función para registrar el valor de retorno:
const count = 0; const a = () => { // Update the document title using the browser API document.title = `You clicked ${count} times`; } console.log(a()); Esto imprime undefined .
También puede usar console.log en la función useEffect para ver que también devuelve undefined .
Si cambiaste el gancho a esto:
useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; return () => { console.log('cleanup'); } }); Vería el mensaje de "cleanup" cada vez que el componente se vuelve a renderizar o se desmonta. Tendría que activar el renderizado actualizando el estado del componente de alguna manera.