Change loading state after function call

Question

I have 3 API calls in a function fetchData. How do I set the loading state to false after executing the following code:

componentWillMount() {
  this.setState({ loading: true })
  this.fetchData()
  //after these two calls, I want to set the loading State to false
}

All the API calls are each a promise
Using React 14.3

In `this.fetchData()` you probably have some kind of promise, when it resolves then set your loading state to false. See [promise.all()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) — Amr Noman, May 02 '18 at 18:15
Yes, all the calls are a promise. I have looked into promise.all after your reply. Thank you. It does serve my purpose. — Azad Rahman, May 02 '18 at 18:28

score 0 · Answer 1 · answered May 02 '18 at 18:26

0

If you're using Redux you could have your reducer set loading: false after the API calls return.

See for more info

answered May 02 '18 at 18:26

SeaOfLee

11
1
3

Not using Redux – Azad Rahman May 02 '18 at 18:36

score 0 · Answer 2 · answered May 02 '18 at 18:33

0

You should make the API calls on componentDidMount as componentWillMount is set to be deprecated.

FetchData() {
  APIcalls.then(() => {
     This.setState({ loading: false })
   })
 }

answered May 02 '18 at 18:33

Elroy

101
3

Yes, i just checked the Docs. I'll change it. Thank you. – Azad Rahman May 02 '18 at 18:54

Shubham Khatri · Answer 3 · 2018-05-02T19:11:46.740

0

You would make use of async-await and use componentDidMount instead of componentWillMount since this method is likely to be replaced in react v17 Also check this question

Use componentWillMount or componentDidMount lifecycle functions for async request in React

async componentDidMount() {
  this.setState({ loading: true })
  await this.fetchData()
  this.setState({ loading: false });

}

async fetchData() {
    await ApiCall1();
    await ApiCall2();
    await ApiCall3();
}

edited May 02 '18 at 19:11

answered May 02 '18 at 18:36

Shubham Khatri

270,417
55
406
400

Thank you for your feedback. I just checked the React Docs, and yes, you are right. Should use ComponentDidMount. Can you please clarify where I should set the state of loading to false? Thank you. – Azad Rahman May 02 '18 at 18:50
Also I'd like to know which one would be a better solution: using async-await, or using promise.all? – Azad Rahman May 02 '18 at 18:52
@AzadRahman, I updated my answer, Also async-await is the latest syntax, Also you can use async await or promise.all or both of them together, its upto you. There is no major performance benefit – Shubham Khatri May 02 '18 at 19:13

Himanshu Gupta · Accepted Answer · 2018-05-03T03:16:45.013

-1

I used es6 async await function. Inside that, You can use Promise.all to resolve the all promises.

  fetchData = async () => {
    const a = new Promise((resolve, reject) => {
      setTimeout(() => { console.log('one'); return resolve("done!"); }, 1000)
    });

    const b = new Promise((resolve, reject) => {
      setTimeout(() => { console.log('two'); return resolve("done!"); }, 2000)
    });

    return await Promise.all([a, b]) ? true : false;
  }

Write the logic in componentDidMount instead of componentWillMount. you can use fetchData function as a promise. After that you can set state whatever you want.

  componentDidMount() {
    this.setState({ loading: true })
    this.fetchData().then((result)=>{
      console.log(result, 'three');
      this.setState({ loading: false });
    });
  }

You can see working example click here

edited May 03 '18 at 03:16

answered May 02 '18 at 18:57

Himanshu Gupta

382
4
15

Your working example was very helpful. I tried changing a few things which helped me understand the use of async-await here. Also, I should be using componentDidMount, right? – Azad Rahman May 02 '18 at 19:16
Yes, that is the correct place to make a api call. componentWillMount will deprecate in future. Even in react 16.3, its shows warning. – Himanshu Gupta May 02 '18 at 19:19
I'm glad, it helped you. – Himanshu Gupta May 02 '18 at 19:23
Can you please clarify the use of returning true / false instead of just Promise.all[a, b]? – Azad Rahman May 02 '18 at 19:43
@AzadRahman You can return anything you want. It's totally depend on use case. You can return await Promise.all([a, b]). Use stackblitz and try to play around code to understand more. – Himanshu Gupta May 02 '18 at 19:50
Didn't know about stackblitz till now. I used to use codesandbox. I did play around, which clarified a lot of things. Thank you. I hope someone upvotes this. :'3 – Azad Rahman May 02 '18 at 20:24

Change loading state after function call

4 Answers4