can api be called repetitively from react js

Question

I am new to react. Could someone help me out on how an api call can be made repetitively every 15mins and the data be rendered onto the application? Please find the code below. I think using setInterval/setTimeout could be an option. But, which one is best and please help me out for my code below. Thanks in advance!

import React from 'react';
import axios from 'axios';

export default class UserList extends React.Component {
    state = {
        users: []
    };

    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const users = res.data;
                this.setState({users});
            })
    }

    render() {
        return (
            <ul>
                {this.state.users.map(user => <li>{user.name}</li>)}
            </ul>
        )
    }
}

You can use any 1 of them and it should work but just curious, why you wanna make the request every 15 min(s). Is your requirement ask to show live data ? if yes then I guess you can go with setInterval or else simply introduce a refresh button and make the call when required. — Milind Agrawal
– Milind Agrawal, Commented May 8, 2020 at 12:16
Both works but since your are trying to run something at an interval, I would say go with setInterval. It's that it was meant for. — Nicolas
– Nicolas, Commented May 8, 2020 at 12:19

Milind Agrawal · Accepted Answer · 2020-05-08 12:31:45Z

You can use any 1 of them and it should work but just curious, why you wanna make the request every 15 min(s). Is your requirement ask to show live data ? if yes then I guess you can go with setInterval as shown below or else simply introduce a refresh button and make the call when required

import React, { Component } from 'react';
import axios from 'axios';

const INTERVAL_DURATION = 15 * 1000 * 60;

export default class UserList extends Component {
  state = {
    users: [],
  };

  componentDidMount() {
    this._fetchUserInterval = setInterval(this._fetchUsers, INTERVAL_DURATION);
  }

  componentWillUmount() {
    clearInterval(this._fetchUserInterval);
  }

  _fetchUsers = () => {
    axios.get(`https://jsonplaceholder.typicode.com/users`).then(res => {
      this.setState({ users: res.data });
    });
  };

  render() {
    const { users } = this.state;

    return (
      <ul>
        {users.map((user, index) => (
          <li key={index}>{user.name}</li>
        ))}
      </ul>
    );
  }
}

Satnam Singh · Accepted Answer · 2020-05-08 12:18:39Z

1

Try using setInterval() function -

componentDidMount() {
  setInterval(() => {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
     .then(res => {
        const users = res.data;
        this.setState({users});
      });
  }, (15 * 1000 * 60));
}

answered May 8, 2020 at 12:18

Satnam Singh

3443 silver badges14 bronze badges

Comments

rotimi-best · Accepted Answer · 2020-05-08 12:26:34Z

Try this. Use setInterval and store the intervalId so you can clean up when the component unmounts.

import React from 'react';
import axios from 'axios';

export default class UserList extends React.Component {
    state = {
        users: [],
    };

    componentDidMount() {
        // Keep the interval id
        this.intervalId = setInterval(this.getData, 900000);
    }

    componentWillUnmount() {
        // use intervalId to clear the interval onUnmount
        clearInterval(this.intervalId);
    }

    getData() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const users = res.data;
                this.setState({ users });
            })
            .catch(error => console.log(error))
    }

    render() {
        return (
            <ul>
                {this.state.users.map(user => <li>{user.name}</li>)}
            </ul>
        )
    }
}

Vaibhav · Accepted Answer · 2020-05-08 12:29:35Z

1

setTimeout() triggers only once, while for repetitive task setInterval() is the option.

You can go this way

componentDidMount() {
  setInterval(() => {
    axios.get(`https://jsonplaceholder.typicode.com/users.then(res => {
        const users = res.data;
        this.setState({users});
      });
  }, (15 * 1000 * 60));
}

Also, as it is a class component you will have to clear all subscriptions in componentWillUnmount() or getDerivedStateFromProps().

Extra note: Always use keys while iterating in JSX.

render() {
        return (
            <ul>
                {this.state.users.map((user, index) 
                    => <li key={index}>{user.name}</li>)}
            </ul>
        )
    }

answered May 8, 2020 at 12:29

Vaibhav

1,4981 gold badge12 silver badges16 bronze badges

Comments

Nafeo Alam · Accepted Answer · 2020-05-08 12:18:12Z

0

Both should work but using setInterval will be an easier option.

answered May 8, 2020 at 12:18

Nafeo Alam

4,7273 gold badges16 silver badges22 bronze badges

Collectives™ on Stack Overflow

can api be called repetitively from react js

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related