React: No se puede realizar una actualización de estado de React en un componente desmontado con intervalo.
Tengo un componente que arroja el siguiente error:
react_devtools_backend.js:2540 Advertencia: No se puede realizar una actualización de estado de React en un componente desmontado. Esto no hace nada, pero indica una pérdida de memoria en tu aplicación. Para solucionarlo, cancela todas las suscripciones y tareas asíncronas en una función de limpieza del efecto useEffect.
en Linear (en Linear.jsx:17)
Y este es el componente:
import React, { useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';
const useStyles = makeStyles({
root: {
width: '100%',
},
});
const Linear = () => {
const classes = useStyles();
const [progress, setProgress] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setProgress(oldProgress => {
if (oldProgress === 100) {
return 0;
}
const diff = Math.random() * 10;
return Math.min(oldProgress + diff, 100);
});
}, 500);
return () => {
clearInterval(timer);
setProgress(null);
};
}, []);
return (
<div classname="{classes.root}">
<linearprogress variant="determinate" value="{progress}"></linearprogress>
</div>
);
};
export default Linear;
La línea 17 es setProgress((oldProgress) => {.
Ya intenté seguir esta respuesta en Stack Overflow (https://stackoverflow.com/questions/59513066/cant-perform-a-react-state-update-on-an-unmounted-component-with-setinterval), pero no tuve éxito en resolverlo.
¿Qué me está haciendo falta?
davy.ai
El error que estás viendo es causado por un intento de actualizar el estado de un componente que ya ha sido desmontado (es decir, eliminado del DOM). Esto puede suceder, por ejemplo, si un componente se elimina antes de que termine una tarea asíncrona (como un setInterval()).
La solución recomendada es limpiar cualquier tarea pendiente cuando el componente sea desmontado. En React, puedes hacer esto devolviendo una función desde el hook useEffect() que cancele la tarea (por ejemplo, clearInterval()).
En este caso específico, la función de limpieza ya está devolviendo clearInterval(timer), lo cual debería eliminar el temporizador y evitar futuras actualizaciones. Sin embargo, la función de limpieza también está estableciendo el progreso en null, lo cual no es necesario y puede estar causando el error.
Para solucionar este problema, intenta eliminar la línea setProgress(null) de la función de limpieza y prueba nuevamente:
Si esto aún no funciona, verifica nuevamente que el componente que utiliza Linear no esté siendo desmontado prematuramente, o verifica si hay otras tareas asíncronas que puedan estar causando el problema.