Skip to content

Instantly share code, notes, and snippets.

@bvaughn
Last active October 8, 2024 15:46
Show Gist options
  • Save bvaughn/923dffb2cd9504ee440791fade8db5f9 to your computer and use it in GitHub Desktop.
Save bvaughn/923dffb2cd9504ee440791fade8db5f9 to your computer and use it in GitHub Desktop.
React lifecycle cheatsheet

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).
@jedwards1211
Copy link

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

@perjansson
Copy link

@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

@bvaughn
Copy link
Author

bvaughn commented Jan 13, 2018

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

@craigdanj
Copy link

craigdanj commented Jul 6, 2018

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

The new lifecycle methods.

@YeshaS93
Copy link

YeshaS93 commented Aug 23, 2018

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

@SQReder
Copy link

SQReder commented Dec 7, 2018

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

@Razatastic
Copy link

Update would be appreciated, thanks!

@pavel-ismailov
Copy link

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

@pijushbarik
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment