Pasé por un uso simple de la función Limpiar. Al cambiar el valor del texto de entrada, recibimos una alerta del valor que tenemos en el cuadro de texto.
tengo un código como este
import React, { useState, useEffect } from "react"; function App() { const [value, setValue] = useState(""); //Waits for a period of time then resolves function timeout(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } const myAlert =async () =>{ await timeout(1000); alert(`A name was changed: ${value}`); } useEffect(() => { let isCancelled = false; const handleChange = async () => { if (!isCancelled) { await myAlert(); } }; handleChange(); return () => { isCancelled = true; }; }, [value]); return ( <div className="App"> <div> <form> <label> Name: <input type="text" value={value} onChange={(event) => setValue(event.target.value)} /> </label> <input type="submit" value="Submit" /> </form> </div> </div> ); } export default App; Aquí estamos llamando a myAlert en useEffect. Entonces, cómo podemos usar la función de limpieza con este tipo de casos, donde no estamos cambiando el estado en efecto de uso pero llamamos a una función asíncrona en efecto de uso donde cambiamos el estado.
El enlace de codesandbox está aquí: https://codesandbox.io/s/strange-greider-7k1svi?file=/src/App.js
No estoy seguro de por qué intentas usar la función de limpieza. En un caso normal, debe establecer un estado en alguna condición. Los efectos se controlan a través de sus dependencias, no por el ciclo de vida del componente que los usa.
Cada vez que cambien las dependencias de un efecto, useEffect limpiará el efecto anterior y ejecutará el nuevo efecto.
import React, { useState, useEffect } from "react"; function App() { const [value, setValue] = useState(""); const [isCancelled, setsCancelled] = useState(false); //Waits for a period of time then resolves function timeout(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } const myAlert = async () => { await timeout(1000); alert(`A name was changed: ${value}`); }; useEffect(() => { const handleChange = async () => { if (isCancelled) { setsCancelled(true) await myAlert(); } }; handleChange(); }, [value]); return ( <div className="App"> <div> <form> <label> Name: <input type="text" value={value} onChange={(event) => setValue(event.target.value)} /> </label> <input type="submit" value="Submit" /> </form> </div> </div> ); } export default App;