Sé que esta pregunta se hace mucho, pero de las respuestas que pude encontrar vi:

• o no hay función de limpieza en useEffect (así que no es mi caso de uso)
• personas que no usan dependencias en absoluto (y una simple [] dependencia sería suficiente)

Entonces, aquí está mi código:

 import { useEffect, useState } from "react"; import { Button } from "@material-ui/core"; import { CircularProgress } from "@material-ui/core"; export default function App() { const [tasks, setTasks] = useState<string[]>([]); useEffect(() => { const getTasks = () => { setTasks(["1", "2", "3"]); }; getTasks(); return () => { setTasks([]); }; }, [tasks]); if (tasks.length === 0) { return <CircularProgress />; } return ( <div> {JSON.stringify(tasks)} <Button onClick={() => setTasks([])}>Reset tasks data</Button> </div> ); }

Enlace de CodeSandbox: aquí . Eliminé las tasks de las dependencias de useEffect , porque de lo contrario hay un bucle infinito y la pestaña del navegador puede bloquearse.

Déjame explicarte lo que quiero lograr. Esto es solo un fragmento que intenta imitar en lo que estoy trabajando. Tengo una página con una tabla. Esta tabla se crea extrayendo algunos datos de una API. Entonces, la página se carga, se representa una tabla. Luego, debajo de una mesa tengo un botón "Agregar tarea". Esto abre un pequeño formulario al frente, donde se puede crear una nueva tarea. Le paso un método onSubmit , de modo que cuando un usuario hace clic en "Crear", se realiza la solicitud POST. Y luego quiero que la tabla se actualice.

Para hacer esto, establecí las tasks en [] , que son estatales, por lo que el componente se vuelve a renderizar, useEffect se activa y vuelve a descargar las tareas, que contendrán la recién creada. Y funciona, pero solo si no uso una función de limpieza en useEffect . Si lo hago, entro en un bucle infinito (supongo que debido a la dependencia de tasks ).

Como no quiero poner llamadas axios en el ejemplo, esta es la analogía:

• getTasks en mi aplicación hace la llamada a la API
• el botón del ejemplo es el botón que abre un formulario para crear una nueva tarea
• no quería agregar una tabla al ejemplo, así que solo para mostrar los datos, JSON.stringify()

De todos modos, a la pregunta: sé que necesito la dependencia para que la página se actualice cuando realizo los cambios (en el ejemplo, haga clic en el botón). ¿Cómo puedo lograr lo que quiero (volver a renderizar la página después de realizar el cambio en las tasks ) y conservar la función de limpieza en useEffect ? (porque si lo quito todo funciona)