Advertencia: no se puede realizar una actualización de estado de React en un componente desmontado. Esto no es operativo, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y tareas asincrónicas en una función de limpieza useEffect.
useEffect(() => { const unsubscribe = streamCourses({ next: (querySnapshot) => { const task = querySnapshot.docs.map((docSnapshot) => mapDocTask(docSnapshot) ); setCourseDetails(task); }, error: (error) => console.log(error), }); return unsubscribe; }, [setCourseDetails]);Tuve un problema similar a este. Lo que tuve que hacer para solucionarlo fueron dos cosas:
(1) Creé un State booleano isMounted que se configuró en true de forma predeterminada y se usó para envolver el contenido de mis useEffect s para que el contenido de mis useEffect s solo se ejecutara si la pantalla estaba mounted .
(2) Creé un useEffect dedicado únicamente a la limpieza. Lo que significa que este useEffect no tenía nada más que una declaración de return que establecía las diversas variables de State que tenía en sus valores predeterminados.
Ejemplo:
useEffect(() => { if (isMounted) { const unsubscribe = streamCourses({ next: (querySnapshot) => { const task = querySnapshot.docs.map((docSnapshot) => mapDocTask(docSnapshot) ); setCourseDetails(task); }, error: (error) => console.log(error), }); return unsubscribe; } }, [setCourseDetails]); useEffect(() => { return () => { setCourseDetails(null); setIsMounted(false); } }, []);