React component lifecycle hooks cheatsheet for everybody

Показать описание

Welcome to the react component lifecycle cheatsheet, where I will explain all the things related to the react component lifecycle methods.

You'll learn about the four main react component lifecycle stages, when they're fired, and what is happening inside.

Next, we will talk about the methods used during these stages, which ones we need, and which ones we should avoid.

***************************************
Additional Resources
***************************************

We won't forget about these deprecated methods, so you will know which ones you should definitely refactor in your code and don't use anymore.

Finally, in the last step, we will talk about react lifecycle hooks, and I'll tell you how we can implement them to replace all of the lifecycle methods when we build reactjs functional components.

Let's start!

MEET US:

CHAPTERS:
0:00 - Intro
0:45 - React lifecycle diagram
1:12 - React Mount
1:22 - React update lifecycle methods
1:37 - React Unmount
1:53 - React Component Error Handling
4:19 - React constructor
4:48 - React static getDerivedStateFromProps
5:47 - React render
6:36 - React componentDidMount
8:06 - React shouldComponentUpdate
8:46 - React getSnapshotBeforeUpdate
9:25 - React componentDidUpdate
9:37 - React componentWillUnmount
10:25 - React static getDerivedStateFromError
10:38 - React componentDidCatch
11:21 - React componentWillMount
11:27 - React componentWillUpdate
11:34 - React componentWillReceiveProps
11:49 - React lifecycle hooks
12:14 - useEffect hook explanation