Pemisahan kode dengan React.lazy dan Suspense

Anda tidak perlu mengirimkan lebih banyak kode daripada yang diperlukan kepada pengguna, jadi bagi paket untuk memastikan hal ini tidak pernah terjadi.

Houssein Djirdeh

Jeff Posnick

Metode React.lazy memudahkan pemisahan kode aplikasi React pada tingkat komponen menggunakan impor dinamis.

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

Mengapa hal ini bermanfaat?

Aplikasi React yang besar biasanya akan terdiri dari banyak komponen, metode utilitas, dan library pihak ketiga. Jika tidak ada upaya untuk mencoba memuat berbagai bagian aplikasi hanya saat diperlukan, satu paket JavaScript besar akan dikirimkan kepada pengguna Anda segera setelah mereka memuat halaman pertama. Hal ini dapat memengaruhi performa halaman secara signifikan.

Fungsi React.lazy menyediakan cara bawaan untuk memisahkan komponen dalam aplikasi menjadi bagian JavaScript terpisah dengan sedikit pekerjaan. Kemudian, Anda dapat menangani status pemuatan saat menggabungkannya dengan komponen Suspense.

Ketegangan

Masalah pengiriman payload JavaScript yang besar kepada pengguna adalah waktu yang diperlukan halaman untuk selesai dimuat, terutama pada perangkat dan koneksi jaringan yang lebih lemah. Itulah sebabnya pemisahan kode dan pemuatan lambat sangat berguna.

Namun, akan selalu ada sedikit penundaan yang harus dialami pengguna saat komponen pemisahan kode diambil melalui jaringan, jadi penting untuk menampilkan status pemuatan yang berguna. Menggunakan React.lazy dengan komponen Suspense membantu menyelesaikan masalah ini.

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
)

Suspense menerima komponen fallback yang memungkinkan Anda menampilkan komponen React sebagai status pemuatan. Contoh berikut menunjukkan cara kerjanya. Avatar hanya dirender saat tombol diklik, lalu permintaan akan dibuat untuk mengambil kode yang diperlukan untuk AvatarComponent yang ditangguhkan. Sementara itu, komponen pemuatan penggantian akan ditampilkan.

Di sini, kode yang membentuk AvatarComponent berukuran kecil, itulah sebabnya indikator lingkaran berputar pemuatan hanya ditampilkan dalam waktu singkat. Komponen yang lebih besar dapat memerlukan waktu pemuatan yang jauh lebih lama, terutama pada koneksi jaringan yang lemah.

Untuk menunjukkan cara kerjanya dengan lebih baik:

• Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
• Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
• Klik tab Jaringan.
• Klik dropdown Throttling, yang disetel ke No throttling secara default. Pilih 3G Cepat.
• Klik tombol Click Me di aplikasi.

Indikator pemuatan kini akan ditampilkan lebih lama. Perhatikan bagaimana semua kode yang membentuk AvatarComponent diambil sebagai bagian terpisah.

Menangguhkan beberapa komponen

Fitur lain dari Suspense adalah memungkinkan Anda menangguhkan beberapa komponen agar tidak dimuat, meskipun semuanya dimuat lambat.

Contoh:

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
    <InfoComponent />
    <MoreInfoComponent />
  </Suspense>
)

Ini adalah cara yang sangat berguna untuk menunda rendering beberapa komponen sekaligus hanya menampilkan satu status pemuatan. Setelah semua komponen selesai diambil, pengguna akan melihat semuanya ditampilkan secara bersamaan.

Anda dapat melihatnya dengan penyematan berikut:

Tanpa ini, Anda akan mudah mengalami masalah pemuatan bertingkat, atau berbagai bagian UI yang dimuat satu per satu dengan masing-masing memiliki indikator pemuatan sendiri. Hal ini dapat membuat pengalaman pengguna terasa lebih mengganggu.

Menangani kegagalan pemuatan

Suspense memungkinkan Anda menampilkan status pemuatan sementara saat permintaan jaringan dibuat di balik layar. Namun, bagaimana jika permintaan jaringan tersebut gagal karena alasan tertentu? Anda mungkin sedang offline, atau mungkin aplikasi web Anda mencoba memuat lambat URL berversi yang sudah tidak berlaku, dan tidak lagi tersedia setelah deployment ulang server.

React memiliki pola standar untuk menangani jenis kegagalan pemuatan ini dengan baik: menggunakan batas error. Seperti yang dijelaskan dalam dokumentasi, komponen React apa pun dapat berfungsi sebagai batas error jika menerapkan salah satu (atau kedua) metode siklus proses static getDerivedStateFromError() atau componentDidCatch().

Untuk mendeteksi dan menangani kegagalan pemuatan lambat, Anda dapat menggabungkan komponen Suspense dengan komponen induk yang berfungsi sebagai batas error. Di dalam metode render() batas error, Anda dapat merender turunan apa adanya jika tidak ada error, atau merender pesan error kustom jika terjadi masalah:

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));

const renderLoader = () => <p>Loading</p>;

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

  static getDerivedStateFromError(error) {
    return {hasError: true};
  }

  render() {
    if (this.state.hasError) {
      return <p>Loading failed! Please reload.</p>;
    }

    return this.props.children;
  }
}

const DetailsComponent = () => (
  <ErrorBoundary>
    <Suspense fallback={renderLoader()}>
      <AvatarComponent />
      <InfoComponent />
      <MoreInfoComponent />
    </Suspense>
  </ErrorBoundary>
)

Kesimpulan

Jika Anda tidak yakin harus memulai dari mana untuk menerapkan pemisahan kode ke aplikasi React, ikuti langkah-langkah berikut:

1. Mulailah di tingkat rute. Rute adalah cara paling sederhana untuk mengidentifikasi titik aplikasi Anda yang dapat dibagi. Dokumen React menunjukkan cara Suspense dapat digunakan bersama dengan react-router.
2. Identifikasi komponen besar di halaman situs Anda yang hanya dirender pada interaksi pengguna tertentu (seperti mengklik tombol). Memisahkan komponen ini akan meminimalkan payload JavaScript Anda.
3. Pertimbangkan untuk memisahkan hal lain yang berada di luar layar dan tidak penting bagi pengguna.