Why is it a bad idea to call setState() immediately after componentDidMount in React?

4Responses

Write your response…

This answer has received 3 appreciations.

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

Last year, I created this diagram React component lifecycle

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      |
                                                                                                      +---------------------------+
Write a reply...

This answer has received 3 appreciations.

@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

title here

Write a reply...

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 https://facebook.github.io/react/docs/component-specs.html, https://facebook.github.io/react/docs/tutorial.html, and https://facebook.github.io/react/tips/initial-ajax.html).

About componentDidMount ..

" when you change the route for the same view, with a different parameter in path (ie from "/user/42" to "/user/14166"), the same view will be used, with the same root DOM, and componentDidMount WILL NOT be triggered " --disq.us/p/1duw14v

"certainly, and i'd say componentwillreceiveprops() seems more adequate. But it's a LOT more boilerplate & bug prone (IMHO) using the components lifecycle. You'll have to check which properties have changed. " -- disq.us/p/1h8g1bz

Write a reply...

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

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 !

Fetching data in componentWillMount doesn't really do anything differently than using it in componentDidMount. Your component will re-render either way.

That being said, the React documentation recommends that you fetch data in the componentWillMount lifecycle hook. This is to ensure everything has mounted properly.

You have to fetch data somewhere... no matter where you will have to setState and trigger a re-render. Therefore data should be fetched in the component it is being used in, or the closest ancestor of the components sharing the fetched data. You do this to prevent the re-render of components that do not require the fetched data.

Write a reply...

Join a friendly and inclusive Q&A network for coders

  • 🖥Pick the technologies you like & read great content through your feed.
  • 💬Ask a question when you want to learn more about anything.
  • 🚀Share what you know & build your portfolio.
Sign up nowLearn more

loading ...