Reputation: 69
I am trying to cast some data to state on an interval, I am trying to make a graph that updates every x seconds.
fuction func() {
console.log('Hello, world!')
}
setInterval(func, 5000)
Instead of responding every 5 seconds as expected I get two responses every 10 seconds, this problem gets far worse when i try and cast to state as I actually want to.
Here is the response from my API call, I all I am trying to do is cast it to state and log the result.
{
"_id": "60d5e8a81a68bb7b14d9f3b0",
"symbol": "LTC",
"perc": "3.55",
"createdAt": "2021-06-25T14:31:04.677Z",
"updatedAt": "2021-06-25T14:31:04.677Z",
"__v": 0
}
When I use the below code, instead of a double result in double the time, it goes absolutes haywire.
let [ltcArb, setLtcArb] = useState([]);
const fetchLtcArbHandler = () => {
fetch("/arb/ltc")
.then((res) => res.json())
.then((json) => setLtcArb((prev) => [{ perc: json.perc, time: json.createdAt },...prev,]))
.then(console.log(ltcArb));
};
function poes() {
console.log("poes");
}
setInterval(fetchLtcArbHandler, 5000);
I have been knocking my head at this for hours and quite honestly lost some sleep last night. Any and all help will be appreciated, take it easy on me please I am still very very new here. Thanks
Upvotes: 2
Views: 171
Reputation: 31815
That's because you're using a functional component which is actually the render function of the component.
It's being executed every time you re-render the component, thus every time you change the state.
What you need is encapsulate it in a useEffect
with an empty dependency array like this:
useEffect(() => setInterval(fetchLtcArbHandler, 5000), []);
Also, you need to return a cleanup function, otherwise the requests will run indefinitely even when the component is unmounted, while also causing a memory leak because of the potential closure context references:
useEffect(() => {
const interval = setInterval(fetchLtcArbHandler, 5000);
return () => clearInterval(interval);
}, []);
Upvotes: 2