0
310
VistasuseEffect hook: si un valor se actualiza, ¿está garantizado que la función de limpieza se ejecuta sincrónicamente justo antes de su función de efecto?
El valor de retorno de la devolución de llamada useEffect es una función de limpieza de efectos que se llama antes de la devolución de llamada del efecto y antes de que se desmonte el componente.
Me pregunto si se puede garantizar que la función de limpieza se llamará sincrónicamente justo antes de su función de devolución de llamada de efecto correspondiente. Dado que la función de limpieza es síncrona, por supuesto.
Ejemplo : en este componente simple aquí, la cadena "cleanup" se registra antes de "effect" cada vez que presiona el botón Increment .
export default function App() { const [count, setCount] = useState(0); console.log("App: render"); useEffect(() => { console.log("effect"); return () => console.log("cleanup"); }, [count]); return ( <> <h2>useEffect</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </> ); }Pero, ¿se puede garantizar siempre este orden? De hecho: ¿Puede estar seguro de que el código de limpieza se ejecuta directamente antes de la función de efecto correspondiente?
¿O quizás haya algún comportamiento asíncrono involucrado en la función de limpieza de useEffect ?
1 Respuestas
Responde la pregunta0
No, no en general. Por lo general, no puede garantizar que la función de cleanup de un gancho determinado se ejecutará justo antes de su función de efecto correspondiente.
Pero ese no es el caso debido a cualquier comportamiento asíncrono oculto involucrado (a menos que cree explícitamente una función de limpieza asíncrona).
En su ejemplo de código, puede garantizar que la función de cleanup se ejecute directamente antes de la función de effect en caso de que el componente se actualice. Pero eso es solo porque solo tiene un solo componente con una sola función useEffect .
Si tiene varios ganchos useEffect en un componente u otros componentes secundarios con ganchos useEffect , todas las funciones de cleanup de todos los componentes se ejecutan antes de que se ejecuten todas las funciones de effect de todos los ganchos useEffect :
Ass @keith mencionó en su comentario que el orden de ejecución es:
hacer, hacer, limpiar, limpiar, efecto, efecto
Y no
hacer, hacer, limpieza, efecto, limpieza, efecto
En este CodeSandBox ves exactamente eso y puedes jugar con él.