Reference: https://retool.com/blog/the-react-lifecycle-methods-and-hooks-explained
Three React lifecycle phases
- Mounting
- Updating
- Unmounting
These are particular to class-based components- not so much functional.
Functional components use abstracted versions of these.
Use hooks to hook into state changes or lifecycle changes.
Lifecycle Phases
Mounting Phase
- The component is created.
- Inserted into the DOM
- This is called the initial render - happens once
Lifecycle Methods in the mounting lifecycle phase.
- ComponentWillMount
- ComponentDidMount
- Render
componentDidMount() - runs after the component has been rendered to the DOM
Note: good place to set up a time
Updating Phase
- componentWillReceiveProps
- Render
- ComponentDidUpdate
- ShouldComponentUpdate
- ComponentWillUpdate
This is when the component updates or re-renders.
This reaction is triggered when the props change.
This reaction happens when the state changes.
This can happen a number of times.
Unmounting
The last phase within a components lifecycle is unmounting phase.
The component is removed from the DOM
comonentWillUnmount()
Note: clear timers etc