blogDidMount — 2018 Guide to React Component Lifecycle Methods

React Lifecycle Methods Diagram


Why use component lifecycle methods:

  • Performance Enhancement (free up resources taken by the components when they are destroyed)

Commonly Used Lifecycle Methods

Mounting Methods

  1. constructor() — in general, there are two reasons to use a React constructor:
  • Set up your components initial state
  • Bind event handler methods to an instance

Use setState? No, use this.state in the constructor.

2. render() — if you’ve written even one React component, you are familiar with render, the only method you must define in a React.Component. The render function does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser. Examines this.props and this.state to return one of the following:

  • React Elements (JSX)
  • Arrays and Fragments
  • Portals
  • Strings/numbers
  • Booleans or null

Note: If you need to interact with the browser, use componentDidMount instead — keep render pure.

Can use setState here? No.

3. componentDidMount()- this method runs immediately after the component output has been rendered to the DOM. It will not get run in node but will in the browser. This makes it so your component can render first then you can go get the data you need. In your component, you can throw up a loader during this time. Also if you need to interact with the DOM (like if you were wrapping D3) this would be the place to do it. Furthermore, if you need to load data from a remote endpoint this is a good place to instantiate the network request

Can use setState here? Yes, but in most cases you should be able to assign the initial state in the contructor() instead. Be careful — calling setState in componentDidMount can cause performance issues. In some cases it may be necessary — like modals and tooltips.

Updating Methods


Call setState()? you may call setState() in componentDidUpdate() but note that it must be wrapped in a condition or you will cause an infinite loop. Can also cause performance issues.

Unmounting Methods

Can call setState()? No. This is where the component is being terminated.

Rarely used Component Lifecycle Methods

Resource: You Probably Don’t Need Derived State

7. shouldComponentUpdate() — this method returns a boolean letting React know if it should re-render the component. This is for performance purposes. If you have a component that will never update (like a static logo or something) you can just return false here.

  • React is pretty fast at doing this anyway
  • render(), componentDidUpdate(), and UNSAFE_componentWillUpdate() will not be invoked if shouldComponentUpdate() returns false.

8. getSnapshotBeforeUpdate() — in rare use cases, getSnapshotBeforeUpdate() enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. A snapshot value (or null) should be returned.

9. componentDidCatch() — React components that define this life cycle method become Error Boundaries. React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error Boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Resource: Error Handling in React

Soon to be deprecated React Lifecycle methods

11. UNSAFE_componentWillReceiveProps() — this method runs every time the React component receives new/different props from the parent. If some of the state you keep in your component is derived from the parent props, this is where you would take care of that. What if you keep a list of actors in a movie as state that you request from an API? If your parent passes you a new movie, you need to react to that and get new actors for the new movie. This would be an example of where to use this method. Use componentDidUpdate() instead.

View this post on


Software Engineer @GroupNineMedia | I love Javascript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store