[!danger] There is currently no way to write an error boundary as a function component. Use react-error-boundary instead. Most of the time you’ll want to declare an error boundary component once and use it throughout your application anyway.
The Error Boundary component needs to implement static getDerivedStateFromError() to render a fallback UI after an error has been thrown. From this point it will catch all the errors that were thrown inside it.
getDerivedStateFromError()updates the state of the Error Boundary component. That's how we can display the fallback UI.
Once a child's render() throws an Error, the child goes upwards to find the first parent that has implemented getDerivedStateFromError() . Then it executes it and rerenders it.
🗒 We will still see the error message in the browser window and need to close the error message to see what's the rendered Error Boundary.
What about errors that weren't thrown in render()?
If the error is thrown outside of render(), React won't update the component. Bad news is we need to handle the error on our own, including handling the rendering of the Error component. Errors that are thrown outside of render() need to be caught in try..catch