2 Minutes to Learn React 16's componentDidCatch Lifecycle Method

What are Error Boundaries?

“Error boundaries are 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.” -Dan Abramov

Updated article from my blog

You can create an error boundary class component by defining a new lifecycle method componentDidCatch(error, errorInfo).

componentDidCatch() Lifecycle Method

componentDidCatch(error, errorInfo) {}

The first method parameter is the actual error thrown. The second parameter is an object with a componentStack property containing the component stack trace information. The componentDidCatch() lifecycle method works similar to JavaScript’s catch {} but for components. An Error Boundary cannot catch an error within itself. The error will propagate to the closest Error Boundary above it. Sound familiar?

hint: JavaScript catch {} block.

Why do I need componentDidCatch()?

Prior to React 16 Error Boundaries, errors inside components would cause unrecoverable cryptic errors. There was not a great way to handle these errors within the components.

React 16 Error Boundaries to the rescue!


  1. Declarative vs Imperative. One of the beauties of React is it’s Declarative code style. A component itself declares what should be rendered. Error Boundaries follow the Declarative nature of React. You no longer need to resort to imperative code solutions such as try/catch or if/else for conditional rendering of a UI based on errors.
  2. Expected Behavior. Error Boundaries will propagate an error to the closest Error Boundary regardless how deep in the tree the error occurs.
  3. Reusability. You can write one Error Boundary Component and re-use it throughout your app.
  4. Component All The Things



How do I use Error Boundaries?

I’ve created a CodePen to demo the componentDidCatch() lifecycle method. I’d highly recommend forking the pen and adding more Error Boundaries and components to see them in action.


When should I use Error Boundaries?

In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application. -Dan Abramov

You can wrap top level route components, you might also wrap components that might contain obscure code. Its up to you how to best handle protecting against application crashes.

Once React 16 is released more standards and best practices with Error Boundaries will appear. Error Boundaries will encourage JavaScript error reporting services that can be triggered within the componentDidCatch() lifecycle method in Production environments.

For more details check out Error Handling in React 16 by Dan Abramov.

Let me know in the comments how you use Error Boundaries in your apps! You can follow me for more React goodness on Twitter @_SeanGroff




Software Engineer at SelectQuote, @_SeanGroff

Love podcasts or audiobooks? Learn on the go with our new app.

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
Sean Groff

Sean Groff

Software Engineer at SelectQuote, @_SeanGroff

More from Medium

How to Build a Github User Search App With ReactJS 🚀

Learn how to build a Github user dashboard by using ReactJS then test & deploy the app with Cypress, WebdriverIO, and ScreenerIO.

How to create a React App using Parcel

React: A full-stack journey

1. State-props