Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Tori Crawford
Tori Crawford

Posted on • Edited on

     

componentWillMount() vs componentDidMount()

While building my React and Redux project in bootcamp, I had a difficult time understanding the fundamental differences between thecomponentWillMount() andcomponentDidMount() methods. I kept getting frustrated when one would work, yet I didn’t understand how or why.

componentWillMount()

One big snag that I didn’t realize until an online study group session is thatcomponentWillMount() was deprecated in 2018. While you can continue to use it (until React 17.0), it isn’t best practice because it is not safe for async rendering. If you do choose to continue to use it, you should useUNSAFE_componentWillMount().

The Reason

Using a fetch call withincomponentWillMount() causes the component to render with empty data at first, becausecomponentWillMount() willNOT return before the first render of the component.

Due to the fact that JavaScript events are async, when you make an API call, the browser continues to do other work while the call is still in motion. With React, while a component is rendering it doesn’t wait forcomponentWillMount() to finish, so the component continues to render.

With all that being said, you would need to to create a component that still looks presentable without the data that you are hoping to display. There is no way (not even a timer) to stop the component from rendering until the data is present.

When I was building my project, I didn’t know about the deprecation ofcomponentWillMount() and I didn’t understand why I kept getting the “cannot read property ‘map’ of undefined” error. I was so confused because I had an array and it should be getting populated by data, but it wasn’t.

Turns out this makes complete and total sense since the component is rendered with empty data at first, so the array was empty and couldn’t be iterated over. It was only at this point that I learned that it is best practice to usecomponentDidMount().

componentDidMount()

The best place to make calls to fetch data is withincomponentDidMount().componentDidMount() is only called once, on the client, compared tocomponentWillMount() which is called twice, once to the server and once on the client. It is called after the initial render when the client received data from the server and before the data is displayed in the browser. Due to the fact that the data won’t be loaded until after the initial render, the developerNEEDS to set up the components initial state properly.

On a side note, withcomponentDidMount() you can use a timer and have the data updated every so often without the user ever having to refresh the page. I’d say that is a really neat feature that can be useful in projects/websites.

Final Notes

Once I learned that I should be usingcomponentDidMount(), my project really came to life. Everything else was working properly and that was my final error to fix. It was amazing learning that it was this simple of a problem, it just seemed complex to me at first. The more I write about it, the more it becomes clear. I hope that by the time you’ve gotten to this point you feel like you have a better grasp on the topic as well. If you need any extra information, please feel free to look at my resources, they are great articles!

Sources

componentDidMount() v/s componentWillMount() — React
Where to Fetch Data: componentWillMount vs componentDidMount
componentWillMount is deprecated in react 16.3
What’s new in React 16.3(.0-alpha)

Top comments(4)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
aks30498 profile image
aks30498
Javascript and blockchain enthusiast
  • Location
    India
  • Work
    Software developer at Hashedin
  • Joined

I don't understand this part:componentWillMount() which is called twice, once to the server and once on the client. It is called after the initial render when the client received data from the server and before the data is displayed in the browser.

I've read this reason at a number of places, but I don't understand what server are you talking about ?

Also am using hooks now but isn't it so that even with componentDidMount/useEffect with empty dependency array, I already have the component rendered once ? I mean, I set the state such that values are undefined initially and then I show a loader or something.

So what's the difference when you say that when componentWillUpdate has made an API call, component has already rendered once before the response comes back and state is set ? can't I set the initial state such that I get a blank view until componentWillUpdate's fetch call brings me data ?

CollapseExpand
 
thisurathenuka profile image
Thisura Thenuka
A philomath who loves to share the things learnt
  • Location
    Sri Lanka
  • Education
    University of Westminster
  • Work
    Full Stack Developer
  • Joined

Wow! I was so confused. Thanks a lot for your help. Love from Sri Lanka

CollapseExpand
 
yoann_buzenet profile image
Yoann Buzenet
Hey there! Javascript amateur working on React. Loved your article about Electron.
  • Joined

Thank you for your help !! Greetings from Paris !

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

A software engineer who loves learning and sharing knowledge.
  • Location
    Boise, ID
  • Education
    M.S.
  • Pronouns
    she/her
  • Work
    Full Stack Software Engineer - Looking for Next Role
  • Joined

More fromTori Crawford

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp