Skip to content

Instantly share code, notes, and snippets.

@garrettmac
Last active August 25, 2017 16:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save garrettmac/f720ad6dc60cfccd60f1816fe519bbab to your computer and use it in GitHub Desktop.
Save garrettmac/f720ad6dc60cfccd60f1816fe519bbab to your computer and use it in GitHub Desktop.
Lifecycle (in order) Triggered When Use When
getDefaultProps Triggered when Useful when
The result of getDefaultProps() will be cached and used to ensure that this.props.value will have a value if it was not specified by the parent component.
componentWillMount() Triggered before render(). Useful when
componentDidMount() Triggered Called after render. Can access refs. The componentDidMount() method of child components is invoked before that of parent components. This is the place to call external libraries, use setTimeout, make ajax requests Useful when
shouldComponentUpdate(nextProps, nextState) Triggered when updates Useful when called when there are new props or state changes. return false to prevent a render. good for performance.
componentWillReceiveProps(nextProps) Triggered when view is updated Useful when Called before render when props change. Access to old props. It is not triggered after the component is mounted.
componentWillUpdate(nextProps, nextState) Triggered when immediately before rendering when new props or state are being received. Not called for the initial render. Cannot use setState in this method. Use componentWillReceiveProps instead. Use this as an opportunity to perform preparation before an update occurs. Useful when
render Triggered when the state changes. Useful when
componentDidUpdate(prevState, prevProps) Triggered when updates Useful when you want to access to prevState, prevProps Use this as an opportunity to operate on the DOM when the component has been updated.
componentWillUnmount Triggered when Useful to clean up event bindings, etc.
@garrettmac
Copy link
Author

Lifecycle (in order) Triggered When Use When
getDefaultProps Triggered when Useful when
The result of getDefaultProps() will be cached and used to ensure that this.props.value will have a value if it was not specified by the parent component.
componentWillMount() Triggered before render(). Useful when
componentDidMount() Triggered Called after render. Can access refs. The componentDidMount() method of child components is invoked before that of parent components. This is the place to call external libraries, use setTimeout, make ajax requests Useful when
shouldComponentUpdate(nextProps, nextState) Triggered when updates Useful when called when there are new props or state changes. return false to prevent a render. good for performance.
componentWillReceiveProps(nextProps) Triggered when view is updated Useful when Called before render when props change. Access to old props. It is not triggered after the component is mounted.
componentWillUpdate(nextProps, nextState) Triggered when immediately before rendering when new props or state are being received. Not called for the initial render. Cannot use setState in this method. Use componentWillReceiveProps instead. Use this as an opportunity to perform preparation before an update occurs. Useful when
render Triggered when the state changes. Useful when
componentDidUpdate(prevState, prevProps) Triggered when updates Useful when you want to access to prevState, prevProps Use this as an opportunity to operate on the DOM when the component has been updated.
componentWillUnmount Triggered when Useful to clean up event bindings, etc.

@garrettmac
Copy link
Author

React lifecycle cheatsheet

Method (in order) 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.

  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