You can't do that with hooks. Hooks do not have an equivalent of componentDidCatch. See this section of the hook FAQ


I wrote react-use-error-boundary to achieve this.

React 16 introduced Error Boundaries. As of React 17, there still is not an equivalent hook for function components.

I liked the API implemented by Preact's useErrorBoundary and attempted to recreate a similar API. If you're interested in building this from scratch you can checkout the code on GitHub.


You can implement error boundary in react hooks with the help of react-error-boundary package.

npm install --save react-error-boundary


import {ErrorBoundary} from 'react-error-boundary'

function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <button onClick={resetErrorBoundary}>Try again</button>

const ui = (
    onReset={() => {
      // reset the state of your app so the error doesn't happen again
    <ComponentThatMayError />

Please read more on React-error-boundary


*There is no Error Boundaries in hook yet *


There are no Hook equivalents for these methods yet, but they will be added soon.


The questions is whether it is possible to implement Error Boundary as a hook and the answer is no BUT it does not mean that you can not use Error Boundary class components in a project which you use hooks heavily.

Create a Error Boundary class component and wrap your React Functional Components(hooks) with the Error Boundary class component.

Related Query

More Query from same tag