Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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 boundary without converting it into a class?

Or is this a code smell?

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

As of v16.2.0, there's no way to turn a functional component into an error boundary.

The React docs are clear about that, although you're free to reuse them as many times as you wish:

The componentDidCatch() method works like a JavaScript catch {} block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.

Also bear in mind that try/catch blocks won't work on all cases.
If a component deep in the hierarchy tries to updates and fails, the try/catch block in one of the parents won't work -- because it isn't necessarily updating together with the child.

over 4 years ago · Santiago Trujillo Denunciar

0

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 (
      <div className="error-screen">
        <h2>An error has occured</h2>
        <h4>{error.message}</h4>
      </div>
    )
  } else {
    return <React.Fragment>{props.children}</React.Fragment>
  }
})

reference and API here

over 4 years ago · Santiago Trujillo Denunciar

0

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. I published react-use-error-boundary, attempting to recreate an API similar to useErrorBoundary from Preact.

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda