Monday, October 28, 2019

reactjs - Will setState inside componentWillReceiveProps run before render?



The react docs mention that calls to setState are enqueued, and do not happen immediately. Does react make any guarantees that setState enqueued inside componentWillReceiveProps will execute before the next component render? Are either of these scenarios more likely than the other?





  1. props change > componentWillReceiveProps called > setState enqueued > setState runs > render (which includes new state)


  2. props change > componentWillReceiveProps called > setState enqueued > render > setState runs > re-rendered




Or, are both of these scenarios equally likely? Meaning does React not make any guarantees when setState will run relative to component lifecycle methods?



Here is a ES2015 code excerpt of my example:



import React from 'react';


class Widget extends React.Component {

componentWillReceiveProps() {
this.setState({foo: 'bar'});
}

render() {
return ;
}
}


Where triggerExternalPropsChange passes new props to the Widget component.



Answer



The only reason componentWillReceiveProps exists is to give the component an opportunity to setState. So yes, any state you set synchronously in it will be processed together with the new props. There won’t be two renders in this case, just one.


No comments:

Post a Comment

hard drive - Leaving bad sectors in unformatted partition?

Laptop was acting really weird, and copy and seek times were really slow, so I decided to scan the hard drive surface. I have a couple hundr...