Most of the times, I am doing ajax calls after component mounts and do a setState to reflect the changes in view. Why is it considered a bad practice?

Write your answer…

4 answers

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      |
                                                                                                      +---------------------------+

Reply to this…

Hashnode is a friendly and inclusive dev community.
Come jump on the bandwagon!

  • 💬 Ask programming questions without being judged

  • 🧠 Stay in the loop and grow your knowledge

  • 🍕 More than 500K developers share programming wisdom here

  • ❤️ Support the growing dev community!

Create my profile

@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

Reply to this…

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.

Reply to this…

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).

Show all replies

Calling an Ajax method (and THEN calling setState when it completes) is not the same thing as calling setState directly in componentDidMount.

The gist of the initial advice is don't call setState in componentDidMount. Kicking off an async process (ajax call) that calls setState will do it AFTER componentDidMount has finished (and should therefore trigger componentDidUpdate, rather than forceUpdate.

Yes? medium.com/@baphemot/understanding-reactjs-..

DO

  • cause side effects (AJAX calls etc.)

DON’T

  • call this.setState as it will result in a re-render

Reply to this…

The Author Card

Simon Ruis's photo

Simon Ruis

Crazy Noder

Appreciations

183

Joined

Jan 11, 2016