CDM is being called before the render method

How is this possible?, I’ve always thought the componentDidMount method is called after the component is rendered into the DOM, but I don’t know why in the console I’m seeing the render method being called last. Look at these console.log()

componentDidMount() {
    let product = data.filter(
      item => item.path === this.props.match.params.product
    );
    product = Object.assign({}, ...product);
    const index = _.findIndex(data, product);
    this.fetchProduct(product, index);

    console.log("CDM method:", product);
  }

render() {
    const { product } = this.state;
    console.log("render method:", product);
    return (...);
}

And this is what I see in the console

What’s going on here? I have a small bug in my application and I wonder if it’s related to this strange behavior.

Not all calls to the render are true "render to the DOM"s. Sometimes React is checking out the render to understand what has changed or what is needed.

From the React docs:

Mounting

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

Updating

An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

N.B., this is for React 16.4 and a few names have changed. For example, componentWillMount (and a few others) is being replaced by getDerivedStateFromProps. If you’re using and older version of React, some of the functions might be slightly different.

This is also a handy interactive diagram.

React is a very complex system made by a lot of very smart people. Don’t surprised if takes a while to grasp it. And if there are continually new layers.

There’s an old quote from the great jazz trumpeter Miles Davis, after a lady in the audience complained that she couldn’t understand what he was doing. “It took me twenty years study and practice to work up to what I wanted to play in this performance. How can she expect to listen five minutes and understand it?”

But keep at it and you’ll get it.