Puedo hacer que una clase sea un límite de error en React implementando componentDidCatch .
¿Existe un enfoque limpio para convertir un componente funcional en un límite de error sin convertirlo en una clase?
¿O es un olor a código?
A partir de v16.2.0, no hay forma de convertir un componente funcional en un límite de error.
Los documentos de React son claros al respecto , aunque eres libre de reutilizarlos tantas veces como quieras:
El método
componentDidCatch()funciona como un bloquecatch {}de JavaScript, pero para componentes. Solo los componentes de clase pueden ser límites de error. En la práctica, la mayoría de las veces querrá declarar un componente de límite de error una vez y usarlo en toda su aplicación.
También tenga en cuenta que los bloques try/catch no funcionarán en todos los casos .
Si un componente en lo profundo de la jerarquía intenta actualizarse y falla, el bloque try/catch en uno de los padres no funcionará, porque no necesariamente se actualiza junto con el hijo.
Hay una implementación que puede manejar funcionalidades inexistentes para un componente funcional como componentDidCatch y deriveStateFromError .
Según el autor, se basa en React.memo().
La solución propuesta está muy inspirada en la nueva API React.memo().
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> } })referencia y API aquí
Como ya se mencionó, el equipo de React aún no ha implementado un gancho equivalente y no hay plazos publicados para la implementación de un gancho.
Algunos paquetes de terceros en npm implementan ganchos de límite de error. Publiqué react-use-error-boundary , intentando recrear una API similar a useErrorBoundary de Preact .