Yo uso Overmind con reacción iónica:
Pestaña1:
const { count } = useAppState() const { increaseCount } = useActions() return <IonPage> <IonContent> <IonRouterLink routerLink='/tab1/page1'>1. Go to another page</IonRouterLink> // Go to page 1 <IonText><p>{count}</p></IonText> <IonButton onClick={() => increaseCount()}>4. Increase again</IonButton> </IonContent> </IonPage>Página 2:
const { count } = useAppState() const { increaseCount } = useActions() return <IonPage> <IonContent> <IonBackButton defaultHref="/" /> // Go back to tab 1 <IonText><p>{count}</p></IonText> <IonButton onClick={() => increaseCount()}>4. Increase again</IonButton> </IonContent> </IonPage>Cuando hago esto:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.Creé este código mínimo de reproducción: https://github.com/dopeshot/ionic-overmind-cant-perform-state-update
También creé un video corto del problema: https://www.youtube.com/watch?v=5w6r1_lxoS8
¿Cómo puedo solucionar este problema?
Este problema es un error en la biblioteca overmind-react. Si va al código fuente, puede ver que no configuranmountRef.current en mountedRef.current cuando el componente se desmonta, por lo que cuando cambia el estado, intenta volver a representar el componente desmontado. Debería estar aquí https://github.com/cerebral/overmind/blob/cb095ffa0cd49504fed6bbc99054d89ba9b92ea3/packages/overmind-react/src/index.ts#L139
Puede clonar el repositorio, agregar el siguiente cambio al código y señalar la dependencia a su versión en un repositorio de git (o publicar su propio paquete)
return () => { mountedRef.current = false; overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {Lo mejor sería abrir un tema de GitHub y, si es posible, abrir el PR con ese pequeño cambio. Pero no esperaría que se aborde pronto, ya que parece ser un problema que solo ocurre en el desarrollo.
NO necesita actualizar el estado en la devolución de llamada si el componente aún no está montado.
como el estado de error:
Advertencia de error: no se puede realizar una actualización de estado de React en un componente desmontado.
Declare let isMounted = true dentro useActions (o useEffect , no se recomienda usar useAction , y ya no se admite realmente, puede leer el comentario del creador de redux sobre esto ), que se cambiará en la devolución de llamada de limpieza, tan pronto como se desmonte el componente. Antes de las actualizaciones de estado, ahora verifica esta variable condicionalmente:
useEffect(() => { let isMounted = true; // note mutable flag someAsyncOperation().then(data => { if (isMounted) setState(data); // add conditional check }) return () => { isMounted = false }; // cleanup toggles value, if unmounted }, []); // adjust dependencies to your needs solución más completa : Custom useAsync Hook Podemos encapsular todo el repetitivo en un Hook personalizado, que cancela automáticamente las funciones asíncronas en caso de que el componente se desmonte o los valores de dependencia hayan cambiado antes:
function useAsync(asyncFn, onSuccess) { useEffect(() => { let isActive = true; asyncFn().then(data => { if (isActive) onSuccess(data); }); return () => { isActive = false }; }, [asyncFn, onSuccess]); }