lifecycle: componentWillReceiveProps called before componentDidMount

Question

If I understand correctly the React lifecycle of a Component should make sure that componentDidMount is called before componentWillReceiveProps. When I test this on the initial mount of a component it seems to work that way. But when the component is has already been mounted before and is remounted the order is the other way around. Is this the expected behavior? The following piece of code illustrates a potential bug that could be introduced this way:

class Example extends React.Component {
    componentDidMount() { 
        this.something = { foo: 'bar' };
    }
    componentWillReceiveProps(nextProps) {
        this.something.foo;
        // Throws a TypeError if this code is reached before
        // componentDidMount is called.
    }
}

Answer 1

The short answer:
The order of firing these methods is indeed not guaranteed. Which is one of the reasons why (as in your example) using component variables outside props and state is not a good idea.

Better: put your { foo: 'bar' } in state if you need to use it beyond lifecycle events.

The longer answer:

componentDidMount() is only called once for each lifecycle:

• after the first render (NB: after all children have also rendered, and after all children have also called their componentDidMounts)
• if the component is rendered after it has been unmounted (but this really is a new lifecycle)

componentWillReceiveProps() is NOT called on first render in lifecycle, but is called on all following renders = when the parent sends props again.

Normally, the second render (triggering) componentWillReceiveProps will come after the component (and its children) have finished mounting, so after componentDidMount().

But I can think of at least 1 (maybe theoretical) scenario where the order will reversed:

1. Component receives props, and starts rendering.
2. While component is rendering, but has not yet finished rendering, component receives new props.
3. componentWillReceiveProps() is fired, (but componentDidMount has not yet fired)
4. After all children and component itself have finished rendering, componentDidMount() will fire.

So componentDidMount() is not a good place to initialise component-variables like your { foo: 'bar' }.
componentWillMount() would be a better lifecycle event.
However, I would discourage any use of component-wide variables inside react components, and stick to design principles:

• all component variables should live in either state or props (and be immutable)
• all other variables are bound by the lifecycle method (and not beyond that)