React hooks equivalent of componentDidCatch?

There is not a React hook equivalent of componentDidCatch.

However, the React team plans to add one soon.

The React docs state:

There are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet, but we plan to add them soon.

Read more: https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes


As mentioned already, the React team has not yet implemented a hook equivalent, and there are no published timelines for a hook implementation.

A few third party packages on npm implement error boundary hooks. This is the most popular npm package. Alternatively, I published react-use-error-boundary, attempting to recreate an API similar to useErrorBoundary from Preact.


There is not any official hook for Error Boundaries(componentDidCatch) in react. but you can simply use try...catch to catch component errors like this:

function myComponent(...) {
  // Initialize state variables.
  // Initialize context variables.
  // Initialize custom hooks.
  // ...

  try {
    // Define internal functions.
    // Define internal variables.

    return (
      <SomeThing />
    )
  } catch (error) {
    // Catch internal functions, variables and return (jsx) errors.
    // You can also create a lib to log the error to an error reporting service
    // and use it here.
  }
}

The try...catch block is the Error Boundry here.

Limitation: when you use a hook like useEffect and you use some internal functions in it, you cannot put that internal function into try...catch(Error Boundary) block because you should define that function on top of useEffect hook (why?) and you shouldn't use useEffect conditionally (why?)!