Reactjs useState every second and scroll element at the same time not woking

39 Views Asked by At

I have reactjs component with a function inside useEffect that is being called every second to retrieve new data from API endpoint:

    useEffect(() => {
         const getOverviewData = async () => {
         const endpoint1 = 'http://localhost:1111/overview/data/'
         const endpoint2 = 'http://localhost:1111/overview/test/'

        try {
          const responses = await Promise.all([
            fetch(endpoint1),
            fetch(endpoint2),
         ]);

         const results = await Promise.all(
           responses.map(response => response.json())
         );
         setOverview(state => ({...state, data: results[0] ?? 0}))
         setOverview(state => ({...state, test: results[1] ?? 0}))
         // ... set other state variables

         setOverviewHistorical(prevData => ({
          ...prevData,
          data: [...prevData.data, [Date.now(), results[0]]],
          test: [...prevData.test, [Date.now(), results[6] !== null ?results[6].toFixed(2) : 0]],
         }));
  
       } catch (error) {
        console.error('Error fetching data:', error);
        // Handle errors, maybe set some error state
      }
     }

getOverviewData();
const interval = setInterval(() => {
  getOverviewData();
}, 1000); // 60,000 milliseconds = 1 minute

return () => {
  clearInterval(interval)
};
    },[])
return (<Drawer
        PaperProps={{
          sx: {
            width: "auto",
            backgroundColor: 'black,
            height: '90%'
          },
          ref: scrollRef,
        }}
        anchor={anchor}
        open={state[anchor]}
        onClose={(e) => toggleDrawer(false, e)}
      >
        element with scroll
</Drawer>)

inside getOverviewDAta() function i update state using setState() Also there is an element with overflow-y: auto when i use the mouse wheel to scroll on the element, some times the position of the scroll keep pushing back, and not stop on the place that i stopped at, I think it is due to re-rendering of component every second as the state change, how can I avoid this behavior?

0

There are 0 best solutions below