How can I make use of Error boundaries in functional React components?

Question

I can make a class an error boundary in React by implementing componentDidCatch.

Is there a clean approach to making a functional component into an error bo

Answer 1

There is an implementation that can handle with non-existent functionalities for a functional component such as componentDidCatch and deriveStateFromError.

According to the author, it is based on React.memo().

The proposed solution is greatly inspired by the new React.memo() API.

import Catch from "./functional-error-boundary"

type Props = {
  children: React.ReactNode
}

const MyErrorBoundary = Catch(function MyErrorBoundary(props: Props, error?: Error) {
  if (error) {
    return (
      

        
An error has occured
        
{error.message}
      
    )
  } else {
    return {props.children}
  }
})

reference and API here