Will setState inside componentWillReceiveProps run before render?

Question

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 <div>
      <a onClick={(e) => {
        e.preventDefault();
        this.props.triggerExternalPropsChange();
      }}>
        Click me to trigger new props
      </a>
    </div>;
  }
}

Where triggerExternalPropsChange passes new props to the Widget component.

Answer 1

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.