React Basic Concept You Must Know!

frontend Dec 9, 2023

React.js adalah sebuah library JavaScript untuk membuat UI. React pertama kali dikembangkan oleh tim Facebook pada tahun 2013. Saat ini, React menjadi library frontend yang paling populer. Oke, kita mulai. Apa saja konsep dasar dari React.js?

Single Page Application (SPA)

Sebenarnya, SPA bukan fitur eksklusif pada React, tapi kita harus tahu apa itu SPA. Single Page Application ini bukan berarti aplikasi kita hanya memiliki satu halaman (route) /index ya… Lalu, SPA itu apa?

SPA ini adalah sebuah implementasi Web App yang saat sebuah halaman dibuka dia hanya akan melakukan load Document satu kali. Selanjutnya, ketika ada perubahan UI, semuanya akan dilakukan dengan menggunakan JavaScript API tanpa perlu melakukan load halaman/document lagi.

JSX (JavaScript XML)

JSX adalah Sebuah extention dari JavaScript yang memungkinkan untuk menuliskan HTML pada JavaScript. Mungkin sudah banyak yang tau document.createElement pada JS. Nah dengan JSX pembuatan element dapat langsung ditulis pada file JavaScript tanpa createElement()

const el = document.createElement("h1")
el.innerHTML = "Hello World"

const el = <h1>Hello World</h1>

dari kode di atas bisa kita lihat, untuk membuat sebuah tag h1 dengan isi Hello World sangat mudah dan cepat pada JSX dibandingkan dengan JavaScript.

Virtual DOM

Pada lingkungan React ada 2 konsep DOM yaitu Real DOM (DOM pada browser) dan Virtual DOM (representasi Real DOM yang dikelola oleh React).

Virtual DOM adalah sebuah abstraksi dari DOM (Document Object Model). Karena proses manipulasi Real DOM itu lambat, hadirlah Virtual DOM. Proses manipulasi DOM pada Virtual DOM ini lebih cepat karena perubahan hanya terjadi pada memori, bukan di tampilan browser.

Lalu bagaimana cara Virtual DOM untuk mengubah tampilan browser?

Ketika sebuah state berubah pada Virtual DOM, React akan membandingkan dengan versi Virtual DOM sebelumnya. Ketika ditemukan perbedaan, maka selanjutnya React akan melakukan re-render komponen yang berubah pada Real DOM.

State dan Props

Dalam menggunakan React dapat dipastikan kita akan menggunakan kedua ini. State dan props berfungsi untuk mengelola data pada komponent.

State

State adalah sebuah data yang merepresentasikan sebuah keadaan. Mudahnya ini adalah sebuah variabel yang dapat berubah seiring dengan waktu dan interaksi dari user. Ketika state berubah, React akan secara otomatis melakukan re-render pada komponen tempat state itu berada

Props

Props atau properties ini memiliki definisi yang sama dengan parameter pada sebuah fungsi. Props adalah sebuah data yang dikirimkan dari komponen parent-nya.

function sum(a, b) {
  // di sini a dan b adalah sebuah parameter yang digunakan dalam fungsi sum
  return a + b
}

sum(2, 5)

function Sum(a, b) {
  // fungsi sum memiliki props a dan b yang digunakan untuk menampilkan komponen
  return (
    <p>
      {a} ditambah {b} adalah {a + b}
    </p>
  )
}

function App() {
  return <Sum a={2} b={5} />
}

Hooks

Nah, ini salah satu konsep React.js yang mungkin agak sulit dipahami untuk orang yang baru terjun ke dunia React. Oke, kenapa ada hooks dan apa itu?

Hooks adalah sebuah fitur yang lahir akibat pergantian model komponen React yang awalnya Class Component beralih ke Functional Component. Hooks adalah sebuah fungsi JavaScript untuk membantu mengelola state dan lifecycle dari sebuah komponen React. Ada banyak macam dari Hooks pada React, tetapi 5 ini adalah yang paling banyak digunakan

useState

seperti namanya ‘state’, hook ini digunakan untuk mendeklarasikan sebuah state pada komponen. Ketika state ini berubah, react akan melakukan re-render pada komponen dimana state ini berada. Ingat hanya perubahan state yang dapat memicu re-render. Ketika ada perubahan variabel biasa (let) react tidak akan melakukan re-render.

useEffect

Mungkin ini salah satu hook yang cukup sulit dideskripsikan karena memilik banyak sekali use case. Hook ini sangat sering digunakan pada komponen. Meskipun begitu, banyak yang tidak tahu behaviornya secara penuh.

Hook ini memungkinkan kita untuk menambahkan ‘side effect’ pada komponen seperti fetching data, atau berinteraksi dengan DOM.

Masih bingung? mudah-mudahan alasan kenapa hook ini dibuat akan memudahkan untuk dipahami.

useEffect dibuat untuk menggantikan method lifecycle pada class component React yaitu componentWillMount, componentDidMount, dan componentWillUnmount. selain tiga tadi, hook ini juga digunakan sebagai pengganti componentDidUpdate.

Artinya, useEffect akan dijalankan ketika sebuah komponen di-mount (di-render) pada Real DOM, serta saat komponen akan di-unmount (dihapus dari Real DOM). Kita juga dapat mengatur agar useEffect dijalankan ketika ada sebuah state pada komponen yang berubah.

useCallback

Hook ini bertujuan untuk melakukan memoisasi sebuah function yang terdapat di dalam komponen. Ketika react melakukan re-render, semua kode di dalam komponen akan dijalankan kembali, nah useCallback ini menghindari sebuah fungsi dibuat ulang ketika re-render.

useMemo

Hook ini mirip dengan useCallback. Bedanya, useMemo digunakan untuk memoisasi sebuah value. Misalnya, kita memiliki ekspresi dengan komputasi besar, hasilnya dapat dimasukkan ke dalam useMemo untuk menghindari eksekusi pada setiap re-render komponen karena setiap render, react akan seluruh isi dari komponen yang di-rerender.

useContext

Hook ini berfungsi untuk memberikan konteks pada komponen. konteks ini dapat diibaratkan sebuah global state yang dapat diakses oleh komponen children tanpa perlu melakukan passing props.

Sekian pembahasan konsep dasar React.JS. Semoga membantu kalian yang baru terjun ke dunia React 🚀.