Reactjs Suspense For Data Libraries Error Recovery Reset

React.js1 September 20263 menit baca

Reactjs Suspense For Data Libraries Error Recovery Reset

Definisi

Suspense for Data adalah pola di mana pustaka data (Relay, React Query via useSuspenseQuery, atau use() bawaan) mengintegrasikan diri ke Suspense, sehingga komponen bisa "menunggu" data tanpa useEffect + state loading manual. Error Recovery menunjukkan cara merespons error di dalam boundary dan memulihkan UI tanpa remount seluruh tree.

Kapan dipakai

Suspense for data: ingin loading state terpusat di <Suspense fallback>, komponen jadi bersih tanpa isLoading boilerplate.
Error recovery: saat data gagal, tampilkan fallback lalu beri tombol retry yang me-reset error boundary tanpa reload halaman.

Hindari suspense untuk data yang harus di-cache manual/optimistic; kombinasikan dengan strategi lain bila perlu.

Cara kerja

use() untuk async

tsx

import { use } from 'react';
 
function Profile({ userPromise }: { userPromise

Selesai membaca dokumentasi ini?

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

Kembali ke Kategori

tsx

class ErrorBoundary extends React.Component {
    state = { error: null };
    static getDerivedStateFromError(error: Error) {
        return { error };
    }
    retry = () => this.setState({ error: null });
 
    render() {
        if (this.state.error) {
            return (
                <div>
                    <p>Gagal memuat.</p>
                    <button onClick={this.retry}>Coba lagi</button>
                </div>
            );
        }
        return this.props.children;
    }
}

Reactjs Suspense For Data Libraries Error Recovery Reset | Rujukan Pemrograman | Mahir.dev Academy

Reactjs Suspense For Data Libraries Error Recovery Reset

Reactjs Suspense For Data Libraries Error Recovery Reset

Definisi

Kapan dipakai

Cara kerja

use() untuk async

Selesai membaca dokumentasi ini?

Suspense boundary

Error boundary + reset

Struktur alur

Contoh React Query suspense

Catatan implementasi

Kesalahan umum

Referensi terkait