Method | Side effects1 | State updates2 | Example uses |
---|---|---|---|
Mounting | |||
componentWillMount |
✓ | Constructor equivalent for createClass |
|
render |
Create and return element(s) | ||
componentDidMount |
✓ | ✓ | DOM manipulations, network requests, etc. |
Updating | |||
componentWillReceiveProps |
✓ | Update state based on changed props |
|
shouldComponentUpdate |
Compare inputs and determine if render needed | ||
componentWillUpdate |
Set/reset things (eg cached values) before next render | ||
render |
Create and return element(s) | ||
componentDidUpdate |
✓ | ✓ | DOM manipulations, network requests, etc. |
Unmounting | |||
componentWillUnmount |
✓ | DOM manipulations, network requests, etc. |
For more information see here.
- "Side effects" refer to modifying variables outside of the instance, async operations, etc.
- "State updates" refer to the current instance only (eg
this.setState
).
@pavel-ismailov React recommends to use
setState
insidecomponentDidUpdate
with a condition checking to prevent infinite loop of re-rendering.https://reactjs.org/docs/react-component.html#componentdidupdate
The
componentWillUpdate
lifecycle method is not a suitable place to callsetState
or anything side-effects and it will not trigger an update to React component before it returns. This method will also not work after React 17.https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate