GALIH L. PRAKOSO

Sejalan dengan perjalananku untuk mengenal React.js lebih dalam. Aku akan menulis rangkaian hasil pembelajaranku di blog ini. Selain untuk catatan pribadiku, aku harap ini juga bisa bermanfaat bagi kalian yang membacanya. React.js tentu sangat kompleks secara keseluruhan namun jika kita memahami setiap bagian kecilnya, tentunya suatu saat kita juga dapat memahaminya secara keseluruhan. 😁

Oh iya, sebelum kita lanjut, aku perjelas ya. Pada rangkaian artikelku ini aku ga akan bahas tentang bagaimana cara menggunakan React.js ya. Aku akan lebih berfokus untuk lebih memahami cara kerja dari React.js secara teknis dan mendalam.

Pengertiannya cukup sederhana, React.js adalah library yang digunakan untuk membuat UI (User Interface). React.js memecah - mecah setiap bagian kecil dari UI dan menyebutnya dengan nama Component.

Mungkin bagi kita yang sudah lama menggunakan React, kita sudah sangat familiar dengan konsep React yang cukup jelas secara high-level. Konsep mengenai component dan lifecycle-nya, method render() tempat dimana kita biasa mendefiniskan struktur UI pada komponen dengan JSX (Javascript XML) dan juga sebenarnya yang sangat menarik adalah adanya algoritma untuk mendeteksi perubahan state atau props-nya.

Algoritma pada bagian akhir paragraf di atas tentu sangatlah penting, karena algoritma itulah yang menentukan kapan komponen akan melakukan update pada UI / Screen.

Secara teknis, proses yang dibicarakan pada paragraf di atas disebut dengan reconciliation atau rekonsiliasi. Kalau kalian sudah familiar dengan React.js, kalian tentu tahu salah satu method pada komponen React yang bernama setState(). Pada saat method tersebut dipanggil, React.js akan melakukan apa yang disebut dengan reconciliation untuk mengecek apakah terjadi perubahan pada state atau props pada setiap komponent. Jika terjadi perubahan, maka React.js akan memutuskan untuk me-render ulang komponen tersebut untuk meng-update tampilannya di UI.

Mungkin kalian pernah mendengar kalau tree yang dikembalikan oleh method render() sering disebut sebagai Virtual DOM. 😦Bagi beberapa orang mungkin istilah tersebut dapat mempermudah pemahaman terhadap React tapi mungkin juga beberapa orang yang lain jadi tambah bingung. 😂 FYI, istilah tersebut juga sudah tidak digunakan pada dokumentasi resmi React. Mmm, yaudah gini aja, kita sepakat untuk menyebutnya dengan "tree of elements" lebih simple.

React sebenarnya juga memiliki "tree of internal instances" berbeda dengan tree  yang disebut pada paragraf sebelumnya, instances yang dimaksud disini adalah components, DOM node, dsb. React mulai mengimplementasikan hal ini mulai dari versi React yang ke 16. Selain itu React juga mengimplementasikan sebuah algoritma yang digunakan untuk mengelola "tree of internal instances" tersebut. Algoritma itu bernama Fiber.

Pada artikel selanjutnya. Kita akan benar-benar memulai perjalanan kita untuk mengenal React lebih dalam lagi dengan mempelajari Fiber.