Why you should use them ?

As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree 😱.

Unmounting the whole React component tree, means that if you don't catch errors at all the user will see an empty white screen 💥. Most of the time without having any feedback. This is not a great UX ❌, fortunately you can fix this by using Error Boundaries ✅.

How to use Error Boundaries

To benefit from Error Boundaries, we'll have to create a stateful component that will use the following lifecycle methods ♻️:

Pretty simple right? With a few lines of code, you can catch errors on your React-Native app 🎉

To use it, all you need to do now is to wrap it around any component that could throw an error.

const App = () => (
<ErrorBoundary>
<Children />
</ErrorBoundary>
)

This component will catch all the errors that are thrown by any of his children. A common thing is to use it at the top level of your application 🔝 to catch anything without having to use it on every screen or route 👏