React lifecycle cheatsheet

react-lifecycle-cheatsheet.md

This is forked from @bvaughn's React lifecycle cheatsheet to integrate the changes made in lifecycle methods in 16.3

React lifecycle cheatsheet

Method	Side effects1	State updates2	Example uses
Mounting
componentWillMount			Deprecated
render			Create and return element(s)
componentDidMount	✓	✓	DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps			Deprecated
getDerivedStateFromProps		✓	Update state based on changed props
shouldComponentUpdate			Compare inputs and determine if render needed
componentWillUpdate			Deprecated
getSnapshotBeforeUpdate			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.

1. "Side effects" refer to modifying variables outside of the instance, async operations, etc.
2. "State updates" refer to the current instance only (eg this.setState).