ReactJS SetTimeout / setInterval [duplicate] - reactjs

Question

This question already has answers here:
Adding setInterval to componentDidMount in React
(2 answers)
Closed 1 year ago.
I am trying to get the following to reload every 30 seconds.
componentDidMount() {
fetch('https://example.com/json')
.then((res) => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.data,
});
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
this.setState({
isLoaded: true,
error,
});
},
);
}
I have tried to wrap it in setInterval but no success. I am wondering how do I make this into a function so I can reload it as need be.

Answer 1

What I would suggest you is to take fetch function out of componentDidMount method. Write it inside a loadData() called function or whatever you want to name it. Then in loadData() function wrap your fetch logic with like
following.
const loadData = () => {
setInterval(
async function(){
//your fetch logic here with await
}, 30000);
}
componentDidMount() {
loadData()
}

Answer 2

Let's say you want to fetch data every 30 sec after you enter in component and then stop this fetching on component exit:
componentDidMount() {
this.myInterval = setInterval(() => {
fetch('https://example.com/json')
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.data
});
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
this.setState({
isLoaded: true,
error
});
});
}, 30000);
}
componentWillUnmount() {
clearInterval(this.myInterval);
}
Should be enough.