React.js Async await setState(), is this the right way to do this?

Question

Without async &/or with prevState, I could not console.log the needed state of page right after setting a new state of page.

Since I've been doing some backend stuff I started learning how async works. So I figured maybe I can use await before this.setState to get the right state for the if statement that has to come right after setting the state.

changePage = async (newPage) => {
  if(this.state.page !== newPage){
    await this.setState({ page: newPage});
    console.log(this.state.page);
    if(this.state.page === ''){

    }else if(this.state.page === ''){

    }
  }
}

But I've never really seen this before nor ever used it in this way, so I am wondering is there a better way to do this?

**`setState` doesn't return a Promise**. So anytime it works, it's just a race-condition. — Emile Bergeron, Feb 10 '20 at 19:49
[One way to _promisify_ `setState`](https://stackoverflow.com/a/45744345/1218980) — Emile Bergeron, Feb 10 '20 at 19:55

score 0 · Accepted Answer · answered Feb 10 '20 at 19:35

In a class component, setState takes a callback that runs after the state update. So you don't really need to use async or await and can just do:

this.setState({ page: newPage}, () => {
  console.log(this.state.page);
  if(this.state.page === ''){

  }else if(this.state.page === ''){

  }
});

React.js Async await setState(), is this the right way to do this?

1 Answers1