React Class Methods Cheatsheet
July 23, 2019
These notes are summaries from the React docs.
The first method to be called inside a class component. Used to set initial state from props,
and to bind methods. Binding methods allow the methods to refer to the class as
This is the only method where it is acceptable to assign to
this.state directly, rather
Basically don’t use this. Only use this if you are in a situation where your state depends on changes to props over time. Animation is a good example. Most reasons why you need this can be solved in the following simpler ways:
- If you need to perform a side effect, use componentDidUpdate
- If you need to recompute data only when a prop changes, use a memoisation helper.
- If you want to reset state when a prop changes, either make the component fully controlled, or fully uncontrolled with a key.
shouldComponentUpdate (Every render except first)
Used only for performance optimisations. Use this only when absolutely necessary, optimisation often comes at the cost of clean and easy to read code. Use PureComponent first, rather than doing shouldComponentUpdate by hand, as it does a shallow comparison for you. Be careful when using this though, especially when your props are objects. You might need to run your props through a memoise function to make sure you keep referential integrity.
This is the only required method. It should be a pure function. It should not interact directly with the browser. If you need to interact with the browser, use componentDidMount instead. It uses the state and props to build up one of the following items:
- React Elements
- Arrays and Fragments
- A String
- A Numeral
- A Boolean
- A null
componentDidMount (First Render only)
A useful place to set up subscriptions. Make sure to clean up after yourself in componentWillUnmount.
This is a good place to make network requests. Avoid making
this.setState calls from here, because
this causes a second render. You won’t see the first render, but it will cause some slowdown in the
componentDidUpdate (Every render expect the first)
If you want to operate on the dom after it has been loaded, this is where you do it. If you are
relying on an api, make sure that you check whether your props have changed before you do so,
you could end up spamming apis pretty easily. If you call
this.setState you’ll need to do the same
otherwise you’ll cause an infinite loop where you make a change, update the component, and call
this method again.
componentWillUnmount (On component teardown only)
If you have a subscription inside componentDidMount, you need to make sure you tear down the subscription to prevent memory leaks. Invalidate your timers, cancel network requests, clean up your subscriptions.
Other methods - Error Handling
getDerivedStateFromError (outside of regular lifecycle)
If you want to catch errors from lifecycle methods from this component or child components, use this. This allows you to set the error state to true.
componentDidCatch (outside of regular lifecycle)
If you want to log errors to a file, do it here, as side effects are permitted here.
Other Methods - Misc
Used to update the state of the component in anything other than the constructor.
Don’t use this. Used to force react to update your component. I’ve only used this for testing purposes, probably didn’t even need it.
This lets you set default props for your properties. Only defaults props which are undefined, not ones which are null.
Used to set a name for the component in debug messages.
Joe Abell is a Ukulele playing Web Dev from York, UK. He blogs to help remind him about things he has learned.