These methods are called in the following order when an instance of a component is being created and inserted into the DOM (bold implies commonly used):
constructor()
- static getDerivedStateFromProps
render()
*
- React updates DOM and refs
componentDidMount()
An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:
New props
||setState()
||forceUpdate()
render()
*
- static getDerivedStateFromProps()
- shouldComponentUpdate()
• render()
- getSnapshotBeforeUpdate ("Pre-commit phase": Can read the DOM.)
- React updates DOM and refs
**
componentDidUpdate()
This method is called when a component is being removed from the DOM:
- componentWillUnmount
**
*
The Render Phase
: Pure. Has no side effects. May be paused, aborted or restarted by React.
**
The Commit Phase
: Can work with DOM, run side effects, schedule updates.