import React, { Suspense } from 'react';

// Mensimulasikan pengambilan data (misalnya, dari API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Membuat resource yang bisa digunakan oleh Suspense
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Komponen yang membaca dari resource
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Nama: {data.name}
      
Umur: {data.age}
    
  );
};

const App = () => {
  return (
    Memuat data pengguna...

Dalam contoh ini:

• `fetchData` mensimulasikan operasi pengambilan data asinkron.
• `createResource` membuat sebuah resource yang dapat digunakan Suspense untuk melacak status pemuatan data.
• `UserProfile` membaca data dari resource menggunakan metode `read`. Jika data belum tersedia, ia akan melempar sebuah promise, yang menangguhkan komponen.
• Komponen `Suspense` membungkus `UserProfile` dan menyediakan prop `fallback`, yang menentukan UI yang akan ditampilkan saat komponen ditangguhkan.

Suspense dengan Code Splitting

Suspense juga dapat digunakan dengan React.lazy untuk mengimplementasikan pemisahan kode (code splitting). Ini memungkinkan Anda memuat komponen hanya saat dibutuhkan, meningkatkan performa pemuatan halaman awal.

import React, { Suspense, lazy } from 'react';

// Memuat komponen MyComponent secara lazy
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Memuat komponen...}>
      
    
  );
};

export default App;

Dalam contoh ini:

• `React.lazy` digunakan untuk memuat komponen `MyComponent` secara lazy (malas).
• Komponen `Suspense` membungkus `MyComponent` dan menyediakan prop `fallback`, yang menentukan UI yang akan ditampilkan saat komponen sedang dimuat.

Memahami Error Boundaries

Error Boundaries adalah komponen React yang menangkap error JavaScript di mana saja dalam pohon komponen anak mereka, mencatat error tersebut, dan menampilkan UI fallback alih-alih merusak seluruh aplikasi. Mereka menyediakan cara untuk menangani error yang tidak terduga dengan baik, meningkatkan pengalaman pengguna dan membuat aplikasi Anda lebih tangguh.

Konsep Kunci Error Boundaries

• Penangkapan Error: Error Boundaries menangkap error selama rendering, dalam metode siklus hidup (lifecycle methods), dan dalam konstruktor dari seluruh pohon di bawahnya.
• UI Fallback: UI yang ditampilkan ketika terjadi error. Ini biasanya berupa pesan error atau placeholder.
• Pencatatan Error: Error Boundaries memungkinkan Anda untuk mencatat error ke layanan atau konsol untuk tujuan debugging.
• Isolasi Pohon Komponen: Error Boundaries mengisolasi error ke bagian-bagian spesifik dari pohon komponen, mencegahnya merusak seluruh aplikasi.

Implementasi Dasar Error Boundaries

Berikut adalah contoh sederhana cara membuat Error Boundary:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Perbarui state sehingga render berikutnya akan menampilkan UI fallback.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Anda juga bisa mencatat error ke layanan pelaporan error
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Anda bisa merender UI fallback kustom apa pun
      return 
Terjadi kesalahan.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Dalam contoh ini:

• Komponen `ErrorBoundary` mendefinisikan metode `getDerivedStateFromError` dan `componentDidCatch`.
• `getDerivedStateFromError` dipanggil ketika terjadi error pada komponen anak. Ini memperbarui state untuk menunjukkan bahwa error telah terjadi.
• `componentDidCatch` dipanggil setelah error ditangkap. Ini memungkinkan Anda untuk mencatat error ke layanan atau konsol.
• Metode `render` memeriksa state `hasError` dan menampilkan UI fallback jika error telah terjadi.

Menggunakan Error Boundaries

Untuk menggunakan komponen `ErrorBoundary`, cukup bungkus komponen yang ingin Anda lindungi dengannya:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // Mensimulasikan sebuah error
  throw new Error('Terjadi sebuah error!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

Dalam contoh ini, jika terjadi error di `MyComponent`, komponen `ErrorBoundary` akan menangkap error tersebut dan menampilkan UI fallback.

Menggabungkan Suspense dan Error Boundaries

Suspense dan Error Boundaries dapat digabungkan untuk menyediakan strategi penanganan error yang tangguh dan komprehensif untuk operasi asinkron. Dengan membungkus komponen yang mungkin ditangguhkan dengan Suspense dan Error Boundaries, Anda dapat menangani baik status loading maupun error yang tidak terduga dengan baik.

Contoh Menggabungkan Suspense dan Error Boundaries

import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// Mensimulasikan pengambilan data (misalnya, dari API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Mensimulasikan pengambilan data yang berhasil
      // resolve({ name: 'John Doe', age: 30 });

      // Mensimulasikan error saat pengambilan data
      reject(new Error('Gagal mengambil data pengguna'));

    }, 2000);
  });
};

// Membuat resource yang bisa digunakan oleh Suspense
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Komponen yang membaca dari resource
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Nama: {data.name}
      
Umur: {data.age}
    
  );
};

const App = () => {
  return (
    
      Memuat data pengguna...}>
        
      
    
  );
};

export default App;

Dalam contoh ini:

• Komponen `ErrorBoundary` membungkus komponen `Suspense`.
• Komponen `Suspense` membungkus komponen `UserProfile`.
• Jika fungsi `fetchData` me-reject dengan sebuah error, komponen `Suspense` akan menangkap promise rejection tersebut, dan `ErrorBoundary` akan menangkap error yang dilempar oleh Suspense.
• `ErrorBoundary` kemudian akan menampilkan UI fallback.
• Jika data berhasil diambil, komponen `Suspense` akan menampilkan komponen `UserProfile`.

Teknik Lanjutan dan Praktik Terbaik

Mengoptimalkan Performa Suspense

• Gunakan Memoization: Lakukan memoize pada komponen yang di-render di dalam batas Suspense untuk mencegah re-render yang tidak perlu.
• Hindari Pohon Suspense yang Dalam: Jaga agar pohon Suspense tetap dangkal untuk meminimalkan dampak pada performa rendering.
• Prefetch Data: Ambil data sebelum dibutuhkan (prefetch) untuk mengurangi kemungkinan terjadinya penangguhan.

Error Boundaries Kustom

Anda dapat membuat Error Boundaries kustom untuk menangani jenis error tertentu atau untuk memberikan pesan error yang lebih informatif. Misalnya, Anda dapat membuat Error Boundary yang menampilkan UI fallback yang berbeda berdasarkan jenis error yang terjadi.

Server-Side Rendering (SSR) dengan Suspense

Suspense dapat digunakan dengan Server-Side Rendering (SSR) untuk meningkatkan performa pemuatan halaman awal. Saat menggunakan SSR, Anda dapat melakukan pra-render status awal aplikasi Anda di server dan kemudian mengalirkan konten yang tersisa ke klien. Suspense memungkinkan Anda untuk menangani pengambilan data asinkron selama SSR dan untuk menampilkan indikator loading saat data sedang dialirkan.

Menangani Skenario Error yang Berbeda

Pertimbangkan skenario error yang berbeda ini dan cara menanganinya:

• Error Jaringan: Tangani error jaringan dengan baik dengan menampilkan pesan error yang informatif kepada pengguna.
• Error API: Tangani error API dengan menampilkan pesan error yang spesifik untuk error yang terjadi.
• Error Tak Terduga: Tangani error tak terduga dengan mencatat error tersebut dan menampilkan pesan error generik kepada pengguna.

Penanganan Error Global

Implementasikan mekanisme penanganan error global untuk menangkap error yang tidak tertangkap oleh Error Boundaries. Ini dapat dilakukan dengan menggunakan penangan error global atau dengan membungkus seluruh aplikasi dalam sebuah Error Boundary.

Contoh Dunia Nyata dan Kasus Penggunaan

Aplikasi E-commerce

Dalam aplikasi e-commerce, Suspense dapat digunakan untuk menampilkan indikator loading saat mengambil data produk, dan Error Boundaries dapat digunakan untuk menangani error yang terjadi selama proses checkout. Sebagai contoh, bayangkan seorang pengguna dari Jepang sedang menjelajahi toko online yang berlokasi di Amerika Serikat. Gambar dan deskripsi produk mungkin memerlukan waktu untuk dimuat. Suspense dapat menampilkan animasi loading sederhana saat data ini diambil dari server yang mungkin berada di belahan dunia lain. Jika gerbang pembayaran gagal karena masalah jaringan sementara (yang umum terjadi di berbagai infrastruktur internet secara global), Error Boundary dapat menampilkan pesan yang ramah pengguna yang meminta mereka untuk mencoba lagi nanti.

Platform Media Sosial

Di platform media sosial, Suspense dapat digunakan untuk menampilkan indikator loading saat mengambil profil dan postingan pengguna, dan Error Boundaries dapat digunakan untuk menangani error yang terjadi saat memuat gambar atau video. Seorang pengguna yang menjelajah dari India mungkin mengalami waktu muat yang lebih lambat untuk media yang di-hosting di server di Eropa. Suspense dapat menunjukkan placeholder hingga konten dimuat sepenuhnya. Jika data profil pengguna tertentu rusak (jarang terjadi tetapi mungkin), Error Boundary dapat mencegah seluruh feed media sosial dari crash, dengan menampilkan pesan error sederhana seperti "Tidak dapat memuat profil pengguna" sebagai gantinya.

Aplikasi Dasbor

Dalam aplikasi dasbor, Suspense dapat digunakan untuk menampilkan indikator loading saat mengambil data dari berbagai sumber, dan Error Boundaries dapat digunakan untuk menangani error yang terjadi saat memuat bagan atau grafik. Seorang analis keuangan di London yang mengakses dasbor investasi global mungkin memuat data dari berbagai bursa di seluruh dunia. Suspense dapat menyediakan indikator loading untuk setiap sumber data. Jika API salah satu bursa sedang down, Error Boundary dapat menampilkan pesan error khusus untuk data bursa tersebut, mencegah seluruh dasbor menjadi tidak dapat digunakan.

Kesimpulan

React Suspense dan Error Boundaries adalah alat penting untuk membangun aplikasi React yang tangguh dan ramah pengguna. Dengan menggunakan Suspense untuk mengelola status loading dan Error Boundaries untuk menangani error yang tidak terduga, Anda dapat meningkatkan pengalaman pengguna secara keseluruhan dan menyederhanakan proses pengembangan. Panduan ini telah memberikan gambaran komprehensif tentang Suspense dan Error Boundaries, mencakup segala hal mulai dari konsep dasar hingga teknik-teknik lanjutan. Dengan mengikuti praktik terbaik yang diuraikan dalam artikel ini, Anda dapat membangun aplikasi React yang kuat dan andal yang dapat menangani skenario paling menantang sekalipun.

Seiring dengan terus berkembangnya React, Suspense dan Error Boundaries kemungkinan akan memainkan peran yang semakin penting dalam membangun aplikasi web modern. Dengan menguasai fitur-fitur ini, Anda dapat tetap terdepan dan memberikan pengalaman pengguna yang luar biasa.