React hooks equivalent of componentDidCatch?

Question

I have a simple component that acts as an error boundary in my React app, and which passes off any errors to a logging service.

It looks something like this:

export class CatchError extends React.PureComponent {   state = {     hasError: false   }    componentDidCatch(error, info) {     this.props.log({ error, info })     this.setState({ hasError: true })   }    render() {     const child = typeof this.props.children === "function"       ? this.props.children({ error: hasError })       : children      return React.cloneElement(child, { error: this.state.hasError })   } } 

Is there a React hook equivalent to componentDidCatch so I can make this component a function and not a class?

So it might look something like this:

export function CatchError({ children, log }) {   const [hasError, setHasError] = useState(false)   const caught = useDidCatch()    useEffect(() => {     const [error, info] = caught     log({ error, info })     setHasError(true)   }, [caught])    const child = typeof children === "function"     ? children({ error: hasError })     : children    return React.cloneElement(child, { error: hasError }) } 

Answer 1

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

Answer 2

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?)!