Reactjs Error Boundary Class Vs Hook Useerrorboundary Library

React.js1 September 20262 menit baca

Reactjs Error Boundary Class Vs Hook Useerrorboundary Library

Definisi

Error Boundary resmi React masih berupa class component (componentDidCatch / getDerivedStateFromError) — hook belum ada untuk menangkap render error. Library seperti react-error-boundary menyediakan ErrorBoundary (wrapper) + useErrorBoundary() hook untuk reset/retry dari dalam child.

Kapan dipakai

Pasang boundary di level yang masuk akal (route, widget) agar satu error tidak menjatuhkan seluruh app. Untuk error async/event handler, boundary tidak menangkap — tangani manual di try/catch.

Cara kerja

Class boundary

jsx

class EB extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError:

Selesai membaca dokumentasi ini?

Kembali ke rujukan utama React.js untuk melanjutkan topik lainnya.

Kembali ke Kategori

jsx

import { ErrorBoundary, useErrorBoundary } from 'react-error-boundary';
 
function Retry() {
  const { resetBoundary } = useErrorBoundary();
  return <button onClick={resetBoundary}>Coba lagi</button>;
}
 
<ErrorBoundary FallbackComponent={({ resetErrorBoundary }) => <Retry/>}>
  <Widget />
</ErrorBoundary>

Reactjs Error Boundary Class Vs Hook Useerrorboundary Library | Rujukan Pemrograman | Mahir.dev Academy

Reactjs Error Boundary Class Vs Hook Useerrorboundary Library

Reactjs Error Boundary Class Vs Hook Useerrorboundary Library

Definisi

Kapan dipakai

Cara kerja

Class boundary

Selesai membaca dokumentasi ini?

Library hook reset

Struktur alur

Catatan implementasi

Kesalahan umum

Referensi terkait