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?