Estoy trabajando en react usando hooks, uso useEffect para hacer un primer llamado a la API y otro para llamar a la API cada 80 segundos con ayuda de setinterval, al ser una pantalla que muestra muchos datos necesitaba hacer un autoscroll para ello use un tercer useEffect para manejar el tiempo pero esta causando que los llamados a la API se hagan cada segundo lo que esta generando problemas de rendimiento.
¿Como puedo hacer para que el useEffect del autoscroll no afecte a los otros dos useEffect?
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Grid from '@material-ui/core/Grid';
import { animateScroll as scroll } from 'react-scroll';
import {
createMuiTheme,
responsiveFontSizes,
MuiThemeProvider,
Typography
} from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
grid: {
width: "100%",
height: "100%"
},
}));
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
export default function Registros() {
const [datos, setDatos]=useState([]);
const [autoScroll, setAutoScroll] = useState(true);
const [top, setTop] = useState(false);
const [step, setStep] = useState(0);
const classes = useStyles();
const goTop = () => {
const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
const body = document.body;
const html = document.documentElement;
const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
const windowBottom = windowHeight + window.pageYOffset;
if (windowBottom >= docHeight && step >1 ) {
setTop(true)
}
};
const getDatos = async () => {
try{
return await axios.get(`localhost:xxxx/api/datos`)
.then(function(response){
return response;
}).then(function(response) {
setDatos(response.data.data);
})
.catch(function(error) {
console.log('error catch', (error))
});
}catch(error) {
console.log('error en datos', error)
}
}
useEffect(() => {
getDatos();
const interval = setInterval(getDatos, 80000);
return () => clearInterval(interval);
}, []);
useEffect( () => {
if (autoScroll){
const timer = setInterval(() => {
setStep(step+1)
if (top===false){
scroll.scrollMore(25);
}
else{
window.scrollTo({
top: 0,
behavior: "smooth"
});
setTop(false);
}
}, 1000);
goTop();
return () => clearInterval(timer);
}
},[autoScroll,step]);
const rfiltrados = datos && datos.filter(r=>r.grupo===2)
return (
<div className={classes.root}>
<MuiThemeProvider theme={theme}>
<Grid container spacing={0} >
<Grid item xs={4}>
Nombre
</Grid>
<Grid item xs={4}>
Departamento
</Grid>
<Grid item xs={4}>
Rendimiento
</Grid>
</Grid>
{rfiltrados.map(row => (
<Grid container spacing={0} >
<Grid item xs={4}>
{row.Nombre}
</Grid>
<Grid item xs={4}>
{row.Departamento}
</Grid>
<Grid item xs={4}>
{row.Rendimiento}
</Grid>
</Grid>
))}
</MuiThemeProvider>
</div>
);
}
[autoScroll,step]
al segundouseEffect
?. Como te ha respondido el compañero de abajo solo hará el rerender cada vez que cambie la variable creando nuevos timers. Toda la logica del segundouseEffect
la puedes meter en otrouseEffect
como el primero. Osea el timer se inicialize cuando se monta el componente.