That is because setState() calls the render() function of your component.

Last year, I created this diagram

You can see that after therender() function, the componentDidMount() function will be called by React. When you put a setState() call in componentDidMount() then you are causing the entire component tree be re-rendered not only the current component - not to forget, the current component did just finished with rendering.

What you really want to use is props instead of state.

Edit: The picture ...

Initial Render - - - - - - - - -> Props Change - - - - - - - - - -> State Change - - - - - - - - - -> Component Unmount

+---------------------------+                                                                                                      
| displayName               |                                                                                                      
+---------------------------+                                                                                                      

+---------------------------+                                                                                                      
| statics                   |                                                                                                      
+---------------------------+                                                                                                      

+---------------------------+                                                                                                      
| mixins                    |                                                                                                      
+-------------+-------------+                                                                                                      
              |                                                                                                                    
+-------------v-------------+                                                                                                      
| propTypes                 |                                                                                                      
+-------------+-------------+                                                                                                      
              |                                                                                                                    
+-------------v-------------+     +---------------------------+                                                                    
| getInitialProps           |     | componentWillReceiveProps |                                                                    
+-------------+-------------+     +-------------+-------------+                                                                    
              |                                 |                                                                                  
+-------------v-------------+     +-------------v-------------+      +---------------------------+                                 
| getInitialState           |     | shouldComponentUpdate     |      | shouldComponentUpdate     |                                 
+-------------+-------------+     +-------------+-------------+      +-------------+-------------+                                 
              |                                 |                                  |                                               
+-------------v-------------+     +-------------v-------------+      +-------------v-------------+                                 
| componentWillMount        |     | componentWillUpdate       |      | componentWillUpdate       |                                 
+-------------+-------------+     +-------------+-------------+      +-------------+-------------+                                 
              |                                 |                                  |                                               
+-------------v-------------+     +-------------v-------------+      +-------------v-------------+                                 
| render                    |     | render                    |      | render                    |                                 
+-------------+-------------+     +-------------+-------------+      +-------------+-------------+                                 
              |                                 |                                  |                                               
+-------------v-------------+     +-------------v-------------+      +-------------v-------------+                                 
| componentDidMount         |     | componentDidUpdate        |      | componentDidUpdate        |                                 
+-------------+-------------+     +-------------+-------------+      +-------------+-------------+                                 
              |                                 |                                  |                                               
              |                                 |                                  |                  +---------------------------+
              +---------------------------------+----------------------------------+------------------> componentWillUnmount      |
                                                                                                      +---------------------------+

@fibric gave awesome answer.

As you can see in the diagram Calling setState in componentDidMount will trigger another render() call and it can lead to layout thrashing.

There's a eslint rule for it.

Read more about Layout Thrashing

The official documentation site for React recommends multiple times that ajax and subsequent setState calls should be done in componentDidMount. I can find no other reliable source that suggests this is a bad practice. Although I understand the rationale for making the ajax call earlier in the lifecycle (e.g., using componentWillMount), I'm curious why the official React site recommends using componentDidMount. Are there potential issues with using componentWillMount instead of componentDidMount?

References facebook.github.io/react/docs/component-specs.html, facebook.github.io/react/docs/tutorial.html, and facebook.github.io/react/tips/initial-ajax.html).

In the MERN tutorial hosted on Hashnode here: hashnode.com/post/react-tutorial-using-mern-stack…

In the step 5.3, the author tell us to:

"Make an ajax call to fetch the data in componentDidMount, use setState() to set the state to the returned data."

So what would be a better alternative to this?

Cheers !