Guillermo Rodas

More than a decade of experience

Google Developer Expert in Web Technologies, Auth0 Ambassador, and Twitch Partner.

https://vitae.guillermorodas.com

You can Google me as well.

✨ Tips to get better at React

1. Consume the official docs.

2. Search for alternatives and tradeoffs.

3. Follow experts' blogposts.

Consume the official docs

Always check the official documentation, it is easy to read and follow and usually explains good and bad practices.

i.e Context:

• https://react.dev/learn/passing-data-deeply-with-context
• https://react.dev/reference/react/useContext

Search for alternatives and tradeoffs

Always search for “alternatives” and consider tradeoffs. i.e:

• Should I use context or a global state manager like Redux?
• Do I need hooks? what was react before hooks?

Follow experts blogposts

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