1

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>
);
}
5
  • 1
    intenta agregar una o varias dependencias a useEffect como segundo parámetro, por ejemplo useEffect( ( ) => ... callback... , [autoscroll, top, ...]). Esto hace que el callback se active al cambiar una de estas dependencias.
    – davidbug
    el 24 may. 2021 a las 16:03
  • 1
    Disculpa me podrías explicar mejor tu idea, al useEffect le tengo que pasar como parametros los estados de autscroll y top?
    – senseilex
    el 24 may. 2021 a las 18:20
  • 1
    Si, cuando le pasas un segundo parámetro a useEffect, solo llamará a la función callback en caso cambie el valor del parámetro (se les llama dependencias). Por ejemplo, si colocas a autoscroll como dependencia de useEffect, solamente se activará la función cuando cambie el valor de autoscroll, de esta manera los otros useEffect no lo afectarán. Aquí te dejo el link de la documentación : es.reactjs.org/docs/hooks-reference.html
    – davidbug
    el 24 may. 2021 a las 19:28
  • 1
    @davidbug agregue las dependencias pero sigue llamando al api cada segundo [step,autoScroll]);
    – senseilex
    el 30 may. 2021 a las 17:36
  • Porque necesitas añadirle las dependencias [autoScroll,step] al segundo useEffect?. 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 segundo useEffect la puedes meter en otro useEffect como el primero. Osea el timer se inicialize cuando se monta el componente.
    – hawks
    el 8 jun. 2021 a las 8:15

1 respuesta 1

1

Tienes dos useEffect que serán ejecutados cuando se monte el componente ¿Puedes combinar estas dos lógicas y mostrarme bien tu componente?

useEffect(() => {
    getData();
    const interval = setInterval(getDatos, 80000);
    return () => clearInterval(interval);
}, []);

UPDATE:

Actualmente, tu segundo useEffect está así:

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]);

Esto hace que crearás un intervalo, que llamará a la función setStep(), cambiando el valor del estado/variable step; como el estado step se encuentra dentro del arreglo de dependencias, hará que se vuelva a ejecutar la función dentro del useEffect, instanciando un nuevo intervalo en cada que se actualice el estado step

La solución que te propongo es la siguiente: Remover step del arreglo de dependencias del useEffect, y llamar la función setStep() haciendo uso de Functional setState setStep(step => step + 1);

useEffect(() => {
        if (autoScroll){
            const timer = setInterval(() => {
                setStep(step => step + 1);
                
                if (!top) {
                    scroll.scrollMore(25);
                } 
                
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                });

                setTop(false);
            }, 1000);
    
            goTop();

            return () => clearInterval(timer);
        }
    }, [autoScroll]);  

Espero te ayude de algo, pero estaré pendiente de todas formas

4
  • Si ya combine los dos useEffect pero sigue afectando al useEffect del scroll, ys puse el componente completo
    – senseilex
    el 4 jun. 2021 a las 2:04
  • También vi una función getData() en la línea 64 de tu código original, ten cuidado, no está definida el 8 jun. 2021 a las 7:34
  • @SantiagoBetancur añadi los cambios que comentaste pero por alguna razon ademas de llamar el api cada segundo al hacer el console.log() me muestra los datos 4 veces, perdonde gatData es GetDatos ya lo corregi
    – senseilex
    el 9 jun. 2021 a las 3:51
  • ¿Cuál console.log? Si el intervalo lo está haciendo cada segundo, entonces se puede decir que está bien(? haahah el 9 jun. 2021 a las 4:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.