State Management di ReactJS: Memahami Hooks dan Context API 

Sumber: Cloudmate Technologies

Dalam pengembangan aplikasi menggunakan ReactJS, kita sering dihadapkan pada tantangan dalam mengelola data atau “state” yang tersebar di berbagai komponen. State management atau manajemen state adalah teknik untuk mengatur data aplikasi agar mudah diakses dan diperbarui, baik secara lokal di satu komponen atau global di seluruh aplikasi. Dalam artikel ini, kita akan mengenal dua fitur utama yang sangat membantu untuk manajemen state di React: Hooks dan Context API. 

Apa Itu State di ReactJS? 

Sumber: Pawan Kumar, Medium

Dalam React, state adalah objek yang menyimpan data yang akan mempengaruhi cara komponen dirender dan berinteraksi dengan pengguna. Ketika state berubah, React akan secara otomatis merender ulang komponen agar mencerminkan data terbaru. Pengelolaan state menjadi lebih rumit saat aplikasi berkembang dan data perlu dibagikan antar banyak komponen. 

Mengapa State Management Penting? 

Tanpa teknik manajemen state yang baik, sebuah aplikasi React bisa menjadi sulit dipahami dan dirawat. Bayangkan sebuah aplikasi besar dengan berbagai komponen yang memerlukan akses ke data yang sama, seperti informasi pengguna yang sedang login atau daftar produk. Tanpa solusi yang tepat, data tersebut harus dikirimkan melalui props dari satu komponen ke komponen lainnya, yang dapat membuat kode tidak efisien dan sulit dipelihara. 

Inilah alasan mengapa React Hooks dan Context API menjadi pilihan populer bagi pengembang. 

1. React Hooks 

Hooks adalah fitur yang diperkenalkan di React 16.8 untuk memungkinkan penggunaan state dan fitur React lainnya tanpa membuat class. Dengan Hooks, kita bisa membuat komponen fungsional (stateless) menjadi lebih kuat dan mendukung manajemen state yang efisien. Berikut adalah beberapa Hooks yang sering digunakan untuk manajemen state: 

• useState: digunakan untuk mendeklarasikan state lokal di dalam komponen. State ini hanya tersedia di komponen itu sendiri dan biasanya digunakan untuk data sementara. 

import React, { useState } from 'react'; 
 
function Counter() { 
  const [count, setCount] = useState(0); 

  return ( 
    <div> 
      <p>Count: {count}</p> 
      <button onClick={() => setCount(count + 1)}>               
         Increment 
      </button> 
    </div> 
  ); 
} 

• useReducer: digunakan untuk manajemen state yang lebih kompleks, terutama jika state tersebut terdiri dari banyak nilai yang saling terkait. useReducer sangat berguna saat aplikasi membutuhkan lebih banyak logika di dalam proses pembaruan state. 

import React, { useReducer } from 'react'; 

const initialState = { count: 0 }; 

function reducer(state, action) { 
  switch (action.type) { 
    case 'increment': 
      return { count: state.count + 1 }; 
    case 'decrement': 
      return { count: state.count - 1 }; 
    default: 
      throw new Error(); 

  } 

} 
function Counter() { 
  const [state, dispatch] = useReducer(reducer, initialState); 
  return ( 
    <div> 
      <p>Count: {state.count}</p> 
      <button onClick={() => dispatch({ type: 'increment' })}>+</button> 
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button> 
    </div> 
  ); 
}

Selain useState dan useReducer, React Hooks memiliki banyak jenis lain yang bisa membantu dalam berbagai aspek pengembangan aplikasi. Misalnya, ada useEffect untuk mengelola efek samping (side effects) seperti pengambilan data dari API, useRef untuk akses elemen DOM secara langsung, dan useMemo yang berfungsi untuk optimalisasi kinerja. Masing-masing Hook memiliki fungsi dan kegunaannya sendiri yang bisa disesuaikan dengan kebutuhan aplikasi. Untuk lebih memahami setiap Hook ini, Anda bisa membaca dokumentasi lengkapnya di React Hooks Documentation. 

2. Context API 

Context API merupakan fitur React yang memungkinkan kita untuk membuat data global yang bisa diakses oleh berbagai komponen tanpa perlu melewati props. Context sangat berguna saat kita membutuhkan akses ke data yang sering digunakan di banyak komponen, seperti informasi login pengguna, tema aplikasi, atau pengaturan bahasa. Berikut adalah contoh cara menggunakan Context API untuk berbagi state antar komponen: 

Membuat Context: 

import React, { createContext, useState } from 'react'; 

export const ThemeContext = createContext(); 

export function ThemeProvider({ children }) { 
  const [theme, setTheme] = useState('light'); 
  return ( 
    <ThemeContext.Provider value={{ theme, setTheme }}> 
      {children} 
    </ThemeContext.Provider> 
  ); 
} 

Mengakses Context di Komponen Lain: 

import React, { useContext } from 'react'; 

import { ThemeContext } from './ThemeProvider'; 

function ThemeToggle() { 
  const { theme, setTheme } = useContext(ThemeContext); 

  return ( 
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> 
      Switch to {theme === 'light' ? 'dark' : 'light'} mode 
    </button> 
  ); 
} 

Dalam contoh ini, ThemeProvider memberikan state theme kepada semua komponen anak di bawahnya, sehingga ThemeToggle bisa mengakses dan mengubahnya tanpa perlu mengirimkan data ini melalui props. 

Kapan Menggunakan Hooks dan Context API? 

Hooks cocok digunakan saat state hanya digunakan oleh satu atau beberapa komponen saja. Sementara itu, Context API lebih ideal saat state perlu diakses oleh banyak komponen dalam hirarki aplikasi yang dalam. 

Jika aplikasi semakin besar, kita bisa mempertimbangkan solusi tambahan seperti Redux atau MobX, yang menawarkan kemampuan manajemen state yang lebih terstruktur dan berfungsi baik di skala besar. 

Kesimpulan 

React Hooks dan Context API menyediakan solusi sederhana namun efektif untuk mengelola state dalam aplikasi React. Dengan memahami cara menggunakan useState, useReducer, dan Context API, Anda dapat membuat aplikasi yang lebih mudah dipelihara, efisien, dan responsif terhadap perubahan data. Kedua fitur ini sangat berguna bagi pengembang yang ingin menjaga kode tetap bersih dan mudah dipahami, bahkan ketika aplikasi berkembang. 

Penulis 

Arya Krisna Putra, S.Kom., M.Kom. 

FDP Scholar 

Sumber: 

1. React Documentation. React: The library fro web and native user interfaces. Diakses pada November 2024 dari react.dev 
2. React Hooks Documentation. Hooks API Reference. Diakses pada November 2024 dari React Hooks Documentation 
3. W3Schools. React useReducer Hook. Diakses pada November 2024 dari W3Schools 
4. Blog Saeloun. Choosing between useReducer and useState in React. Diakses pada November 2024 dari Blog Saeloun