Guillermo Rodas

Google Developer Expert in Web Technologies

Community Organizer and Online Teacher

https://guillermorodas.com

@glrodasz

You can Google me as well.

There are two ways to define a React Component.

Classes

functions

The difference between them is that Functional components couldn't have state and lifecycle definitions.

State

this.state and this.setState()

React.useState() with Hooks

Components used to be called Stateful (Classes) and Stateless (functional), but with hooks that don't apply anymore.

Life Cycle

before React v16.3

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Birth / Mounting

1. Initialize / Construction
2. MyComponent.defaultProps
3. this.state
4. componentWillMount()
5. render()
6. Children initialization & life cycle kickoff
7. componentDidMount()

Growth / Update

1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render()
5. Children Life cycle methods
6. componentDidUpdate()

Death/Unmounting

1. componentWillUnmount()
2. Children Life cycle methods
3. Instance destroyed for Garbage Collection

re-render flowchart and setState() safety

Pop Quiz 🎉

after React v16.4

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

after React v16.4

Error Handling

These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

• static getDerivedStateFromError()
• componentDidCatch()

Hooks 🪝 equivalents

https://medium.com/soluto-engineering/react-class-features-vs-hooks-equivalents-745368dafdb3

componentDidMount()

componentWillUnmount()

componentWillReceiveProps()

componentDidUpdate()

shouldComponentUpdate()

Questions❓

bit.ly/react-lifecycle-hooks