Reactjs - Important Concepts

React dikenal sebagai library UI yang sederhana, namun di balik kesederhanaannya terdapat arsitektur dan konsep internal yang sangat kuat. Memahami konsep-konsep ini akan membantu kita membangun aplikasi React yang lebih cepat, responsif, dan scalable, terutama untuk kebutuhan production.

Artikel ini membahas konsep penting React.js dengan penjelasan yang mudah dipahami dan contoh praktis.

1.React Fiber Architecture

Apa itu React Fiber?

React Fiber adalah reimplementasi core rendering engine React yang diperkenalkan sejak React 16. Ini mengubah secara fundamental bagaimana React memproses update dan merender komponen.

Masalah Sebelum Fiber

Sebelum Fiber, proses rendering React memiliki keterbatasan signifikan:

• Memproses seluruh component tree sekaligus
• Tidak bisa dihentikan di tengah proses
• Component tree yang besar menyebabkan UI freeze
• Interaksi user menjadi tidak responsif saat render berat

Solusi dari Fiber

Fiber memecah proses render menjadi unit-unit kecil yang dapat dikelola. Hal ini memungkinkan React untuk:

• Menghentikan sementara dan melanjutkan kembali pekerjaan rendering
• Memprioritaskan berbagai jenis update
• Memproses update prioritas tinggi (interaksi user) sebelum yang prioritas rendah
• Mengembalikan kontrol ke browser agar UI tetap responsif

Catatan Penting

Fiber bersifat internal dan developer tidak berinteraksi langsung dengannya, tetapi dampaknya pada performa aplikasi sangat besar. Fiber adalah fondasi dari fitur modern React seperti Concurrent Rendering dan Suspense.

2. Concurrent Rendering

Gambaran Umum

Concurrent Rendering memungkinkan React untuk menyiapkan beberapa versi UI secara bersamaan tanpa memblokir main thread. Ini merupakan perubahan paradigma dalam cara React menangani update.

Kemampuan Inti

React sekarang dapat:

• Mengerjakan rendering di background
• Menunda update yang tidak urgent
• Memprioritaskan input dan interaksi user
• Menghentikan dan membuang pekerjaan yang sedang berlangsung jika diperlukan

Manfaat

Aplikasi tetap cepat dan responsif walaupun:

• Memproses dataset besar
• Merender component tree yang kompleks
• Mengelola banyak perubahan state

Contoh Praktis: useTransition

Manfaat utama: Input tetap responsif walau ada proses berat di belakang layar.

3. Code Splitting & Lazy Loading

Masalahnya

Secara default, React membundle seluruh aplikasi dalam satu file JavaScript. Untuk aplikasi besar, ini menyebabkan waktu loading awal yang lambat dan membuang bandwidth untuk memuat kode yang mungkin tidak pernah digunakan user.

Code Splitting

Code splitting membagi bundle menjadi chunk kecil yang dimuat sesuai kebutuhan, mengurangi ukuran bundle awal dan meningkatkan waktu loading.

Lazy Loading

Komponen hanya dimuat ketika benar-benar diperlukan, bukan saat aplikasi dimulai.

Contoh Implementasi

Kasus Penggunaan Terbaik

• Halaman admin dan dashboard
• Fitur yang jarang digunakan
• Library pihak ketiga yang berat
• Code splitting berbasis route4. Context API Optimization

4. Optimasi Context API

Tujuan

Context API menyediakan cara untuk berbagi state global di seluruh komponen tanpa prop drilling (melewatkan props melalui banyak level).

Masalah Performa Umum

Setiap perubahan value pada Context memicu re-render di semua komponen consumer, terlepas dari apakah mereka menggunakan data yang berubah. Tanpa optimasi, ini dapat sangat berdampak pada performa.

Strategi Optimasi

1. Pisahkan context berdasarkan tanggung jawab

Pisahkan data yang tidak terkait ke context berbeda untuk meminimalkan re-render yang tidak perlu.

2. Hindari state yang sering berubah di global context

Simpan state yang sering berubah secara lokal jika memungkinkan.

3. Gunakan memoization

Gunakan memoization pada context value dan komponen consumer.

Contoh Perbandingan

Kurang optimal:

Lebih baik:

Dengan pemisahan ini, re-render menjadi lebih terkontrol dan terisolasi pada komponen yang relevan.

5. Teknik Memoization

Apa itu Memoization?

Memoization adalah teknik optimasi yang menyimpan hasil kalkulasi mahal dalam cache dan menggunakannya kembali ketika input tidak berubah, mencegah perhitungan ulang yang tidak perlu.

Kapan Menggunakan Memoization?

• Komputasi atau kalkulasi yang mahal
• Komponen yang sering re-render
• Props yang tidak sering berubah
• Data turunan dari dataset besar

useMemo Hook

Memoize nilai yang dihitung.

React.memo

Mencegah re-render komponen ketika props tidak berubah.

useCallback Hook

Memoize referensi fungsi.

Peringatan Penting

Penggunaan memoization yang berlebihan dapat mengurangi readability dan maintainability kode. Gunakan secara strategis di mana ada manfaat performa nyata, bukan di mana-mana secara default.

6. Error Boundaries

Apa itu Error Boundaries?

Error Boundaries adalah komponen React khusus yang menangkap error JavaScript di mana saja dalam child component tree saat rendering, dalam lifecycle methods, dan dalam constructors.

Mengapa Penting?

Tanpa Error Boundaries:

• Satu error menghancurkan seluruh aplikasi
• User melihat layar putih kosong
• Tidak ada graceful degradation

Dengan Error Boundaries:

• Hanya bagian UI yang gagal yang terpengaruh
• Sisa aplikasi tetap berfungsi
• User melihat pesan error yang ramah

Contoh Implementasi

Penggunaan

7. Portals

Apa itu Portals?

Portals menyediakan cara untuk merender children ke DOM node yang berada di luar hierarki DOM komponen parent, sambil mempertahankan posisi mereka dalam React component tree.

Kapan Menggunakan Portals?

• Modal dan dialog
• Tooltip
• Dropdown menu
• Overlay dan pop-up
• Elemen UI yang perlu keluar dari overflow: hidden

Contoh Implementasi

Struktur HTML:

React Component:

Perilaku Kunci

Meskipun portal merender ke DOM node yang berbeda, ia berperilaku seperti React child normal dalam segala hal lainnya. Fitur seperti context dan event bubbling bekerja persis seperti untuk child dalam component tree normal.

Penutup

Memahami konsep fundamental React ini memungkinkan developer untuk:

• Menulis kode React yang lebih efisien
• Menghindari bottleneck performa
• Membangun aplikasi production-ready
• Debug masalah dengan lebih efektif
• Membuat keputusan arsitektur yang tepat

React lebih dari sekadar JSX dan state management. Memahami bagaimana React bekerja di balik layar – dari algoritma rekonsiliasi Fiber hingga penjadwalan Concurrent Rendering – memberdayakan Anda untuk membangun aplikasi yang lebih baik dan menyelesaikan masalah kompleks dengan lebih efektif.