react refresh api call code example

Example 1: react refresh api call

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>
        );
      }
    }

Example 2: 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>
        );
      }
    }