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
).
As I understand calling
setState
incomponentDidUpdate
isn't good idea.Component just updated (and already re-rendered), aтв updating state right now will call next render (two renders during a short time)
That rule is about it
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md
Better update state BEFORE next render which is in
componentWillUpdate