Component ‘Malas’, Code Splitting dengan React Lazy!

Nani, React lazy? Sepertinya istilah yang diberikan React memang sedikit nyeleneh, tapi sebenarnya memang seperti itulah fungsinya. Seperti yang kita ketahui, ketika membuat sebuah Build React App, semua code yang kita dibuat akan digabung dan dijadikan bundle berisikan file javascript dan bundle ini akan memberikan code-code yang dibutuhkan untuk dapat ditampilkan sebagai webpage.

Akan tetapi ada saatnya dimana ketika sebuah component sudah semakin banyak dan besar, bundle yang dihasilkanpun akan semakin besar dan kemudian akan mempengaruhi performa website kita.

Berikut adalah salah satu contoh kasus, dimana saya melakukan import modal dan form add product pada halaman manage product:

react import component

react render imported component

Setelah react app saya run dan buka halaman manage product, pada gambar dibawah dapat kita lihat bagian network disamping dimana ketika saya klik button add product dan kemudian modal muncul, tidak ada proses network baru yang terjadi.

before button add product clicked

after button add product clicked

Dengan kata lain, code component modal dan form add product sudah include ketika halaman manage product dibuka, walaupun component modal dan form add product tersebut belum akan muncul sampai saya klik button add product.

Dengan kasus seperti itu, proses loading halaman manage product akan lebih lama karena size yang lebih besar, apalagi ketika ada kasus lain yang serupa yang melibatkan component yang lebih besar.

Lalu bagaimana untuk mengatasi hal tersebut? Yap, React lazy. Bukan berarti malas ngoding react ya. Tetapi react lazy memungkinkan untuk memisahkan component tersebut untuk diload hanya ketika button add product diklik. Cara pakainya juga cukup mudah:

Import lazy dan Suspense dari react

import lazy and suspense

Ubah import component

Function lazy menerima sebuah parameter berupa function dimana function tersebut memanggil dynamic import(), yang mana akan mereturn sebuah promise dengan resolve sebuah modul react component yang memiliki default export.

import component as react lazy component

Masukkan tag component kedalam child tag Suspense

Lazy component harus dirender didalam component Suspense. Suspense memiliki props yang bernama fallback yang menerima sebuah component seperti loading indicator yang akan ditampilkan selama menunggu lazy component selesai diload.

render react lazy component as child of suspense

Done! Berikut hasilnya:

before button add product clicked

after button add product clicked

Dapat kita lihat pada bagian network, render pertama berjalan sebagai mana mestinya, dan ketika saya klik button add product ada dua file chunk js baru yang diload. Component modal dan form add product dapat kita pisah dan hanya akan diload setelah button add product diklik. Hal ini akan sangat berguna untuk menjaga performa website kita.

Sekian kali ini tentang React lazy, sedikit sharing dari pengalaman saya selama belajar react. Dengan ilmu yang masih terbatas ini saya mohon maaf apabila ada salah kata, istilah maupun pemahaman saya tentang lazy dan suspense ini yang ternyata keliru. Saya terbuka untuk kritik dan saran.

Mari sama-sama terus belajar dan terus berkembang.

Salam.