Lifecycle Methods

Hook actions to specific moments in a component's life

Start

Key Concepts

Review core concepts you need to learn to master this subject

Component Mount

Unmounting Lifecycle Method

Component Mounting Phase

Lifecycle Phases

Mounting Lifecycle Methods

Updating Lifecycle Method

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.

Component Lifecycle Methods

Lesson 1 of 1

1
The Component Lifecycle
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 …
Start
2
Introduction to Lifecycle Methods
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…
Start
3
componentDidMount
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…
Start
4
componentWillUnmount
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…
Start
5
componentDidUpdate
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…
Start
6
Review
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…
Start