this.setState() does not work in componentWillReceiveProps

Question

I have a login page in which I am using componentWillReceiveProps to route to the next page. But the state that I am setting inside componentWillReceiveProps does not seem to set.

This is my componentWillReceiveProps method :

  componentWillReceiveProps(nextProps) {
      if (nextProps.isAuthenticated === true) {
          browserHistory.push('/home');
      } else {
        console.log("this.props :::" + JSON.stringify(this.props))
          console.log("this.state :::" + JSON.stringify(this.state))
          console.log("nextProps :::" + JSON.stringify(nextProps))
          this.setState({
              errorMessage: nextProps.authenticationError
          })
          console.log("this.state :::" + JSON.stringify(this.state))
      }
  }

The console output I am getting is this :

this.props :::{"authenticationError":null}  
this.state :::{"username":"35135","password":"3135","errorMessage":""}  
nextProps :::{"isAuthenticated":false,"authenticationError":"Could not find user in DB."}  
this.state :::{"username":"35135","password":"3135","errorMessage":""}

Here even after setting the state, my state has not changed.

Please tell me what is it that I'm doing wrong.

EDIT: I have this component which is ErrorText , which takes in the errroMessage property.

<ErrorText errorMsg={this.state.errorMessage}></ErrorText>

score 10 · Accepted Answer · edited Sep 28 '17 at 21:46

10

setState() is an asynchronous operation, so it doesn't take effect immediately:

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state [...]

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback [...], either of which are guaranteed to fire after the update has been applied.

Here's an example of a setState callback in your context:

this.setState(
    { errorMessage: nextProps.authenticationError },
    function() {
        console.log( 'this.state ::: ' + JSON.stringify( this.state ) );
    }
);

edited Sep 28 '17 at 21:46

Ian Dunn

3,541
6
26
44

answered Feb 20 '17 at 14:00

keul

7,673
20
45

if I use, `componentDidUpdate`, will it again render the component ? – v1shnu Feb 20 '17 at 14:07
1

You should check the new state in `componentDidUpdate` or in the `render`. The general meaning is: just after calling `setState` the state is not updated. – keul Feb 20 '17 at 14:17
1

Actually my use case is this : if my user is found, I redirect, if not I will set the error message in my state. I am sure that `componentWillReceiveProps` will do render again. But I want to know if `componentDidUpdate` update will do `render` by itself, or should I use `forceUpdate()` or something like that. – v1shnu Feb 20 '17 at 14:20
Yes, read the documentation: https://facebook.github.io/react/docs/react-component.html#componentdidupdate – keul Feb 20 '17 at 14:43

score 1 · Answer 2 · edited May 23 '17 at 12:09

Refer to same stackoverflow question:

Why Calling react setState method doesnt mutate the state immediately

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

score 0 · Answer 3 · answered Feb 20 '17 at 14:03

0

This is likely because this.setState is an async function. You can pass a callback to handle events which should happen directly after setting state. Checkout this chosen answer for a code example.

answered Feb 20 '17 at 14:03

Kunal

1,125
2
11
18

this.setState() does not work in componentWillReceiveProps

3 Answers3