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
).
@jedwards1211 React (at least version 16) might call this function many times before doing the actual render call, therefor it’s not recommended to do side effects in it.
Also, it’s called before shouldComponentUpdate and unless that actually returns true you probably don’t want to cause side effects.
Read more here: https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d?source=linkShare-de8169c1a861-1512899215