¿Cómo podemos implementar el límite de error en React Hooks? ¿Incluso es compatible con los ganchos de reacción?
La pregunta es si es posible implementar Error Boundary como un gancho y la respuesta es no, PERO eso no significa que no pueda usar los componentes de la clase Error Boundary en un proyecto en el que usa muchos ganchos.
Cree un componente de clase de límite de error y envuelva sus componentes funcionales React (ganchos) con el componente de clase de límite de error.
* Aún no hay límites de error en el enlace *
componentDidCatch and getDerivedStateFromErrorTodavía no hay equivalentes de Hook para estos métodos, pero se agregarán pronto.
Puede implementar un límite de error en ganchos de reacción con la ayuda del paquete react-error-boundary .
npm install --save react-error-boundary
Entonces:
import {ErrorBoundary} from 'react-error-boundary' function ErrorFallback({error, resetErrorBoundary}) { return ( <div role="alert"> <p>Something went wrong:</p> <pre>{error.message}</pre> <button onClick={resetErrorBoundary}>Try again</button> </div> ) } const ui = ( <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => { // reset the state of your app so the error doesn't happen again }} > <ComponentThatMayError /> </ErrorBoundary> )Lea más sobre React-error-boundary