Saat React Mengatakan Re-render, Itu Berarti Tiga Hal
Saat Anda memanggil setState, React tidak hanya memperbarui DOM. Ia menjalankan tiga fase terpisah secara berurutan. Kebanyakan pengembang sering bingung dengan fase-fase ini. Memahami perbedaannya akan membantu Anda memperbaiki masalah performa.
Tiga Fase Tersebut:
• Render: React memanggil fungsi komponen Anda. • Reconcile: React membandingkan output baru dengan yang lama. • Commit: React menerapkan perubahan ke DOM.
- Fase Render
React menjalankan fungsi Anda. Ia menggunakan props saat ini. Fungsi tersebut mengembalikan JSX. JSX ini hanyalah daftar objek JavaScript. Orang-orang menyebutnya virtual DOM. Ini bukan DOM yang sebenarnya. Ini adalah deskripsi tentang bagaimana tampilan UI seharusnya. Belum ada yang muncul di layar. Fase ini murni matematika dan logika.
- Fase Reconcile
React menyimpan tree lama dan tree baru. Ia mencari perbedaan di antara keduanya. Jika tipe elemen berubah, React akan mengganti seluruh tree. Jika hanya props yang berubah, React akan memperbaruinya. Di sinilah peran keys menjadi penting. Keys membantu React mencocokkan item dalam sebuah list berdasarkan identitas, bukan posisi. Fase ini membuat daftar langkah minimum yang diperlukan untuk memperbarui DOM.
- Fase Commit
React mengambil daftar perubahan tersebut dan menyentuh DOM yang sebenarnya. Ia membuat node baru dan menghapus node lama. Inilah saat pengguna melihat perubahan di layar. Setelah ini, browser melakukan paint pada layar. Kemudian, useEffect dijalankan.
Kesalahpahaman Umum:
• Re-render tidak selalu mengubah DOM. Jika outputnya sama, React tidak melakukan apa pun di fase commit. • React.memo melewati pemanggilan fungsi. Ia tidak melewati pembaruan DOM. • Props tidak memicu re-render. Re-render pada parent memicu re-render pada child. Perubahan prop hanyalah sebuah hasil.
Cara Memperbaiki Performa:
Jika fungsi Anda lambat, Anda memiliki masalah Render. Pindahkan pekerjaan berat keluar dari fungsi atau gunakan memoization.
Jika React membangun ulang list yang sangat besar, Anda memiliki masalah Reconcile. Periksa keys Anda.
Jika DOM terlalu sering diperbarui, Anda memiliki masalah Commit. Gunakan virtualisasi atau ubah struktur Anda.
React 19 dan React Compiler sekarang menangani banyak dari pekerjaan ini untuk Anda. Namun, mengetahui fase-fase ini membantu Anda melakukan debugging dengan lebih baik.