React lifecycle cheatsheet

react-lifecycle-cheatsheet.md

React lifecycle cheatsheet

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.

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).

@bvaughn side effects during componentWillReceiveProps are not okay? I didn't know...what can blow up?

@jedwards1211 React (at least version 16) might call this function many times before doing the actual render call, therefor it’s not recommended to do side effects in it.

Also, it’s called before shouldComponentUpdate and unless that actually returns true you probably don’t want to cause side effects.

Read more here: https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d?source=linkShare-de8169c1a861-1512899215

Whoops! Sorry for missing this question until now. 😄

Check out this this RFC for its description of things that can potentially go wrong when using the will* lifecycle hooks for side effects: reactjs/rfcs#6

@bvaughn
You could add in
static getDerivedStateFromProps() and
getSnapshotBeforeUpdate() and
componentDidCatch()

The new lifecycle methods.

@bvaughn This list is very helpful for beginners. Please update the list with the new lifecycle methods added in 16.3

@bvaughn good cheatsheet, but little outdated. Can you please update it to 16.3+ lifecycle methods? 🙏

Update would be appreciated, thanks!

As I understand calling setState in componentDidUpdate 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

@pavel-ismailov React recommends to use setState inside componentDidUpdate with a condition checking to prevent infinite loop of re-rendering.
https://reactjs.org/docs/react-component.html#componentdidupdate

The componentWillUpdate lifecycle method is not a suitable place to call setState or anything side-effects and it will not trigger an update to React component before it returns. This method will also not work after React 17.
https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate