Encontré esta biblioteca https://react-hooks.org/docs/useeffectoncewhen pero estoy confundido. ¿Por qué existe y con qué propósito se usa? ¿No puedo lograr lo mismo usando useEffect?
useEffect(() => { setTimeout(() => { setLoading(false); }, 3000); // Countdown for 3 sec }, [])Puedes hacer lo mismo con useEffect :
"Si desea ejecutar un efecto y limpiarlo solo una vez (al montar y desmontar), puede pasar una matriz vacía ([]) como segundo argumento"
También puede proporcionar una lista de dependencias que activan el efecto que se ejecuta nuevamente si cambian.
useEffect( () => { doSomething() } , [ifThisChangesRunFuncAgain, orThis, ...] )El gancho es useEffectOnceWhen , no solo useEffectOnce . Según la fuente que vinculaste:
Ejecuta un efecto de devolución de llamada al menos una vez cuando una condición se vuelve verdadera
Aquí está el código fuente de ese gancho :
/** * useEffectOnceWhen hook * * It fires a callback once when a condition is true or become true. * Fires the callback at most one time. * * @param callback The callback to fire * @param when The condition which needs to be true */ function useEffectOnceWhen(callback: () => void, when: boolean = true): void { const hasRunOnceRef = useRef(false); const callbackRef = useRef(callback); useEffect(() => { callbackRef.current = callback; }); useEffect(() => { if (when && !hasRunOnceRef.current) { callbackRef.current(); hasRunOnceRef.current = true; } }, [when]); }Como puede ver, hace algo más avanzado que simplemente ser llamado una vez al comienzo del enlace: se llama una vez que la condición pasada se vuelve verdadera por primera vez.