En el siguiente ejemplo tomado del sitio web usehooks-ts
import { useCallback, useEffect, useRef } from 'react' function useIsMounted() { const isMounted = useRef(false) useEffect(() => { isMounted.current = true return () => { isMounted.current = false } }, []) return useCallback(() => isMounted.current, []) } export default useIsMounted ¿Por qué devolvemos isMounted.current como devolución de llamada y no devolvemos solo el valor isMounted.current ?
¿Cuál sería un ejemplo en el que devolver solo isMounted.current como valor sería una mala idea?
Puede probar las diferentes implementaciones usted mismo para ver qué sucede:
const UnmountingChild = ({ unmount }) => { const { isMounted, isMountedNC } = useIsMounted(); useEffect(() => { console.log('IS MOUNTED BEFORE FETCH', isMounted()); // true console.log('IS MOUNTED NO CALLBACK BEFORE FETCH', isMountedNC.current); //true fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => { console.log('IS MOUNTED', isMounted()); //false console.log('IS MOUNTED NO CALLBACK', isMountedNC.current); //false }); unmount(); // <-- This triggers the unmount of the component }, []); return <>Child</>; }; function useIsMounted() { const isMounted = useRef(false); useEffect(() => { isMounted.current = true; return () => (isMounted.current = false); }, []); return { isMounted: useCallback(() => isMounted.current, []), isMountedNC: isMounted, }; }Consulta la demostración AQUÍ
El uso de una devolución de llamada es útil porque le permite leer directamente el valor de la ref con ref.current cuando sea necesario, simplemente llamando a isMounted() , si desea devolver directamente la ref , solo tiene que asegurarse de devolver todo el ref y no solo ref.current porque si pasa ref.current pasará solo el valor real y no el mutable ref object , por lo tanto, su valor siempre se mantendrá en false . Devolver la ref lo obliga a leer cada vez que la propiedad .current , y eso no es muy bueno, y podría engañar a las personas que usan el gancho sin conocer la implementación interna, mientras que llamar a isMounted() es más agradable de leer, usar y evitar problemas de uso.