0

React Doc says

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state

Does this mean that i can't trust this.state at any place?

For example:

MyComponent extends Component {
  // ...

  handleClick () {
    // ...
    fetch(targetUrl, {
      method: 'POST',
      body: JSON.stringify({
        param1: this.state.param1
      })
    })
  }

  // ...
}

Does it mean that i may send wrong param1 to targetUrl(Since this.state may not been updated yet)?

linmu
  • 45
  • 5
  • Nope , state is asynchronous which means for example if you fetch something from an external API , it will send an response so the time taken to get response may be vary ! Thus , according to state , as it's async it's simply goes to other methods instead of waiting till the response comes ! So you can't solely relay on state untill your sure that the response has been received ! – Arvindh Feb 27 '19 at 02:48

3 Answers3

1

set state is asyncchronus . if you want to do something with state like 

     this.setState({param1:true},()=>{
     fetch(targetUrl, {
     method: 'POST',
    body: JSON.stringify({
    param1: this.state.param1
     })
     })
     })

it takes a call back where you can get state after state is updated and perform action with the updated one.. hope it helps :)

suhail ahmed
  • 122
  • 1
  • 12
0

It means this.setState({}) updates state asynchronously and not instantly. Reaat will decide when to update the state via this.setState({}).

So if you do this.setState({data: response}), it is not guaranteed that it will state instantly, it might take some time to update it.

You can check this using below code:

this.setState({data: response}, () => console.log('state updated'));

Above is updating state and when updated it will execute call back method.

Anil Kumar
  • 2,223
  • 2
  • 17
  • 22
0

It depends on what you do when handleClick.

If your handleClick method is like this:

handleClick () {
    this.setState({ param1: 'something'});
    fetch(targetUrl, {
      method: 'POST',
      body: JSON.stringify({
        param1: this.state.param1
      })
    })
  }

Then when you call fetch, the this.state.param1 is not updated yet. because setState is asynchronous.

And if you don't setState in handleClick, then you will be fine with your code.

Read more about setState Beware: React setState is asynchronous!

Tan Dat
  • 2,888
  • 1
  • 17
  • 39
  • What confuses me is the second situation. Since both this.setState and handleClick are asynchronous, is it possible that handleClick be called before this.setState? I'll read the article first, thx. – linmu Feb 27 '19 at 03:02
  • Do you mean the situation when `handleClick` method gets called repeatedly, then the `setState` gets called continuously and simultaneously, right? React batches state updates that occur in event handlers and lifecycle methods. Thus, if you update state multiple times in a
    handler, React will wait for event handling to finish before re-rendering. Look at this answer: https://stackoverflow.com/a/33613918/4327170     – Tan Dat Feb 27 '19 at 08:53