Pemisahan kode dengan React.lazy dan Suspense

Anda tidak perlu mengirimkan kode lebih dari yang diperlukan kepada pengguna. Oleh karena itu, bagi paket Anda untuk memastikan hal ini tidak terjadi.

Houssein Djirdeh

Jeff Posnick

Metode React.lazy memudahkan pemecahan 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 berukuran besar biasanya terdiri dari banyak komponen, metode utilitas, dan library pihak ketiga. Jika tidak ada upaya untuk mencoba memuat bagian aplikasi yang berbeda hanya saat dibutuhkan, satu paket JavaScript yang besar akan dikirimkan kepada pengguna 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 potongan-potongan JavaScript terpisah dengan sedikit upaya. Anda kemudian dapat menangani status pemuatan saat memasangkannya dengan komponen Suspense.

Ketegangan

Masalah dalam pengiriman payload JavaScript yang besar kepada pengguna adalah lamanya waktu yang diperlukan halaman untuk menyelesaikan pemuatan, terutama pada perangkat dan koneksi jaringan yang lebih lemah. Inilah alasan pemisahan kode dan pemuatan lambat sangat berguna.

Namun, akan selalu ada sedikit penundaan yang harus dialami pengguna saat komponen kode terpisah diambil melalui jaringan. Jadi, penting untuk menampilkan status pemuatan yang berguna. Menggunakan React.lazy dengan komponen Suspense akan 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, yang kemudian permintaan dibuat untuk mengambil kode yang diperlukan untuk AvatarComponent yang ditangguhkan. Sementara itu, komponen pemuatan penggantian ditampilkan.

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

Untuk menunjukkan cara kerjanya dengan lebih baik:

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

Indikator pemuatan akan muncul lebih lama. Perhatikan bagaimana semua kode yang membentuk AvatarComponent diambil sebagai potongan terpisah.

Menangguhkan beberapa komponen

Fitur Suspense lainnya adalah memungkinkan Anda menangguhkan beberapa komponen agar tidak dimuat, meskipun semuanya dimuat dengan 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>
)

Cara ini sangat berguna untuk menunda rendering beberapa komponen sekaligus hanya menampilkan satu status pemuatan. Setelah semua komponen selesai diambil, pengguna dapat melihat semuanya ditampilkan secara bersamaan.

Anda dapat melihatnya dengan sematan berikut:

Tanpanya, Anda akan mudah mengalami masalah pemuatan bertahap, atau bagian UI yang berbeda memuat satu demi satu dengan masing-masing memiliki indikator pemuatan sendiri. Hal ini bisa membuat pengalaman pengguna terasa lebih mengagetkan.

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 URL berversi dengan lambat 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 mengimplementasikan 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 khusus jika terjadi kesalahan:

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 mulai menerapkan pemisahan kode ke aplikasi React dari mana, ikuti langkah-langkah berikut:

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