Key Concepts

Review core concepts you need to learn to master this subject

Component Mount

A React component mounts when it renders to the DOM for the first time. If it’s already mounted, a component can be rendered again if it needs to change its appearance or content.

Unmounting Lifecycle Method

React supports one unmounting lifecycle method, componentWillUnmount, which will be called right before a component is removed from the DOM.

componentWillUnmount() is used to do any necessary cleanup (canceling any timers or intervals, for example) before the component disappears.

Note that the this.setState() method should not be called inside componentWillUnmount() because the component will not be re-rendered.

Component Mounting Phase

A component “mounts” when it renders for the first time. When a component mounts, it automatically calls these three methods, in the order of:

  1. constructor()
  2. render()
  3. componentDidUpdate()

Lifecycle Phases

There are three categories of lifecycle methods: mounting, updating, and unmounting.

A component “mounts” when it renders for the first time. This is when mounting lifecycle methods get called.

The first time that a component instance renders, it does not update. Starting with the second render, a component updates every time that it renders.

A component’s unmounting period occurs when the component is removed from the DOM. This could happen if the DOM is rerendered without the component, or if the user navigates to a different website or closes their web browser.

Mounting Lifecycle Methods

React supports three mounting lifecycle methods for component classes: componentWillMount(), render(), and componentDidMount(). componentWillMount() will be called first followed by the render() method and finally the componentDidMount() method.

Updating Lifecycle Method

When a component updates, shouldComponentUpdate() gets called after componentWillReceiveProps(), but still before the rendering begins. It automatically receives two arguments: nextProps and nextState.

shouldComponentUpdate() should return either true or false. The best way to use this method is to have it return false only under certain conditions. If those conditions are met, then your component will not update.

Component Lifecycle Methods
Lesson 1 of 1
  1. 1
    We’ve seen that React components can be highly dynamic. They get created, rendered, added to the DOM, updated, and removed. All of these steps are part of a component’s lifecycle. The component …
  2. 2
    React components have several methods, called lifecycle methods, that are called at different parts of a component’s lifecycle. This is how you, the programmer, deal with the lifecycle of a compo…
  3. 3
    We’ve made a clock component, but it’s static. Wouldn’t it be nice if it updated? At a high level, we’d like to update this.state.date with a new date once per second. JavaScript has a helpful fu…
  4. 4
    Our clock is working, but it has an important problem. We never told the interval to stop, so it’ll keep running that function forever (or at least, until the user leaves/refreshes the page). When…
  5. 5
    Remember the three parts of a component’s lifecycle: 1. Mounting, when the component is being initialized and put into the DOM for the first time 2. Updating, when the component updates as a r…
  6. 6
    We’ve come to the end of the lesson. We’ve learned about the three major phases of a component’s lifecycle: 1. Mounting, when the component is being initialized and put into the DOM for the firs…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo