Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Updating/Unmounting Lifecycle Methods


The third updating lifecycle method is componentWillUpdate.

componentWillUpdate gets called in between shouldComponentUpdate and render.

componentWillUpdate receives two arguments: nextProps and nextState. Read Example in the code editor to see it in action.

You cannot call this.setState from the body of componentWillUpdate! Which begs the question, why would you use it?

The main purpose of componentWillUpdate is to interact with things outside of the React architecture. If you need to do non-React setup before a component renders, such as checking the window size or interacting with an API, then componentWillUpdate is a good place to do that.

If that sounds abstract, that's okay! All of the lifecycle methods might feel a bit theoretical, until you've used them in real-life scenarios. You'll be doing more of that in the next course.

Report a Bug
If you see a bug or any other issue with this page, please report it here.