react refresh api call
import React, { Component } from 'react';
class Dashboard extends Component {
/*
declare a member variable to hold the interval ID
that we can reference later.
*/
intervalID;
componentDidMount() {
/*
need to make the initial call to getData() to populate
data right away
*/
this.getData();
/*
Now we need to make it run at a specified interval,
bind the getData() call to `this`, and keep a reference
to the invterval so we can clear it later.
*/
this.intervalID = setInterval(this.getData.bind(this), 5000);
}
componentWillUnmount() {
/*
stop getData() from continuing to run even
after unmounting this component
*/
clearInterval(this.intervalID);
}
getData = () => {
// do something to fetch data from a remote API.
}
render() {
return (
<div>
Our fancy dashboard lives here.
</div>
);
}
}
3.63
8
import React, { Component } from 'react';
class Dashboard extends Component {
intervalID;
state = {
data: [],
}
componentDidMount() {
this.getData();
}
componentWillUnmount() {
/*
stop getData() from continuing to run even
after unmounting this component. Notice we are calling
'clearTimeout()` here rather than `clearInterval()` as
in the previous example.
*/
clearTimeout(this.intervalID);
}
getData = () => {
fetch('/endpoint')
.then(response => response.json())
.then(data => {
this.setState({ data: [...data] });
// call getData() again in 5 seconds
this.intervalID = setTimeout(this.getData.bind(this), 5000);
});
}
render() {
return (
<div>
Our fancy dashboard lives here.
</div>
);
}
}
Thank you!
8
0
Are there any code examples left?
New code examples in category Javascript
-
Javascript 2023-04-21 22:52:36
-
Javascript 2022-03-27 22:25:20 javascript download string as file
-
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
-
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
-
Javascript 2022-03-27 21:15:02 javascript regex french phone number
-
Javascript 2022-03-27 21:05:03 cypress custom error message
-
Javascript 2022-03-27 21:00:05 create element javascript with id
-
Javascript 2022-03-27 20:40:57 feather icons react
-
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
-
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password