1
2 import React, { Component } from 'react';
3
4 class Dashboard extends Component {
5 /*
6 declare a member variable to hold the interval ID
7 that we can reference later.
8 */
9 intervalID;
10
11 componentDidMount() {
12 /*
13 need to make the initial call to getData() to populate
14 data right away
15 */
16 this.getData();
17
18 /*
19 Now we need to make it run at a specified interval,
20 bind the getData() call to `this`, and keep a reference
21 to the invterval so we can clear it later.
22 */
23 this.intervalID = setInterval(this.getData.bind(this), 5000);
24 }
25
26 componentWillUnmount() {
27 /*
28 stop getData() from continuing to run even
29 after unmounting this component
30 */
31 clearInterval(this.intervalID);
32 }
33
34 getData = () => {
35 // do something to fetch data from a remote API.
36 }
37
38 render() {
39 return (
40 <div>
41 Our fancy dashboard lives here.
42 </div>
43 );
44 }
45 }
46
47
1
2 import React, { Component } from 'react';
3
4 class Dashboard extends Component {
5 intervalID;
6
7 state = {
8 data: [],
9 }
10
11 componentDidMount() {
12 this.getData();
13 }
14
15 componentWillUnmount() {
16 /*
17 stop getData() from continuing to run even
18 after unmounting this component. Notice we are calling
19 'clearTimeout()` here rather than `clearInterval()` as
20 in the previous example.
21 */
22 clearTimeout(this.intervalID);
23 }
24
25 getData = () => {
26 fetch('/endpoint')
27 .then(response => response.json())
28 .then(data => {
29 this.setState({ data: [...data] });
30 // call getData() again in 5 seconds
31 this.intervalID = setTimeout(this.getData.bind(this), 5000);
32 });
33 }
34
35 render() {
36 return (
37 <div>
38 Our fancy dashboard lives here.
39 </div>
40 );
41 }
42 }
43
44