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
).
@bvaughn side effects during
componentWillReceiveProps
are not okay? I didn't know...what can blow up?