How This Book Is Structured

What's the point of React?

Lesson 0 - Object Elements

Lesson 1 - Element Factory

Lesson 2 - JSX

Lesson 3 - Nested Elements

Lesson 4 - Components

Lesson 5 - Props

Lesson 6 - Prop Types

Lesson 7 - Nested Components

Lesson 8 - Class Components

Lesson 9 - Lifecycle Methods

Lesson 10 - Example App

Lesson 11 - More Lifecycle Methods

Lesson 12 - Refactoring Components

Lesson 14 - Refs

Lesson 15 - Simple Integration

Lesson 16 - Advanced Integration

Lesson 18 - ES215

Virtual DOM Primer

Changelog

A gentle introduction to React, using the JavaScript you already know

React from Zero

We already talked about and used the two most essential lifecycle methods in the previous chapters 

 is that we have some code "hooks" which can run at certain points in our component's life. There are a few other 

 and in this chapter, we learn about the rest of them.

While you won't use all of these lifecycle methods in every component, when you need it, you'll be glad they exist.

Here are the four other lifecycle methods:

React calls each of them at a specific time in a components lifecycle, hence the name. Some can even be called multiple times.

The following diagram illustrates when React calls each method:

github.com/wojtekmaj/react-lifecycle-methods-diagram

In the diagram above, each column represents a "render-cycle".

# Lesson 11 - More Lifecycle Methods

We already talked about and used the two most essential lifecycle methods in the previous chapters `componentDidMount()` and `componentWillUnmount()`.

The idea with `componentDidMount()` and `componentWillUnmount()` is that we have some code "hooks" which can run at certain points in our component's life. There are a few other _lifecycle methods_ and in this chapter, we learn about the rest of them.

While you won't use all of these lifecycle methods in every component, when you need it, you'll be glad they exist.

Here are the four other lifecycle methods:

-   `componentDidUpdate()`
-   `shouldComponentUpdate()`
-   `getDerivedStateFromProps()`
-   `getSnapshotBeforeUpdate()`

React calls each of them at a specific time in a components lifecycle, hence the name. Some can even be called multiple times.

The following diagram illustrates when React calls each method:

![Lifecycle Diagram](https://d2uusema5elisf.cloudfront.net/books/react-from-zero/images/11-more-lifecycle-methods/lifecycle-diagram.png)

Source [github.com/wojtekmaj/react-lifecycle-methods-diagram](https://github.com/wojtekmaj/react-lifecycle-methods-diagram).

In the diagram above, each column represents a "render-cycle".

-   The _Mounting_ cycle runs once on an instance creation of each component.
-   The _New Props_ cycle runs every time the parent component updates the `props`.
-   The _setState_ cycle runs when the `setState()` method of the component is executed.
-   The _forceUpdate_ cycle runs when the `forceUpdate()` method is called.
-   The _Unmounting_ cycle runs once before React removes the component from the DOM.