Skip to content

Instantly share code, notes, and snippets.

@andrewrota

andrewrota/react-lifecycle-cheatsheet.md

Forked from bvaughn/react-lifecycle-cheatsheet.md
Last active April 19, 2017 11:47
Show Gist options
  • Save andrewrota/1fd4035b8635ab49192ea8ff3dac8f73 to your computer and use it in GitHub Desktop.
Save andrewrota/1fd4035b8635ab49192ea8ff3dac8f73 to your computer and use it in GitHub Desktop.
Download ZIP
React lifecycle cheatsheet
Raw
react-lifecycle-cheatsheet.md

React lifecycle cheatsheet

Method Side effects1 State updates2 SSR Example uses
Mounting
constructor ✓ ✓ Called before it is mounted
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.

  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).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment