Pendahuluan

Dalam dunia pengembangan web modern, mengelola status aplikasi (*state management*) adalah salah satu tantangan paling krusial sekaligus menarik. Sebagai *software engineer*, kita sering kali memulai sebuah proyek dengan struktur data yang sederhana. Namun, seiring bertambahnya fitur, *state* yang awalnya hanya berupa satu variabel boolean berubah menjadi objek bersarang yang rumit dan saling ketergantungan. Menjaga kode tetap bersih, efisien, dan mudah dirawat di bawah tekanan kompleksitas ini adalah seni yang membedakan seorang insinyur senior.

Petaka "Prop Drilling" dan Lemahnya Performa useState Tradisional

Ketika aplikasi React tumbuh membesar, ketergantungan antar komponen sering kali memaksa kita untuk mengalirkan data dari komponen induk ke komponen anak yang berada jauh di dalam pohon hierarki. Fenomena ini dikenal sebagai *prop drilling*. Selain membuat kode menjadi kotor dan sulit dibaca (*boilerplate*), perubahan pada *state* di level atas akan memicu *re-render* yang tidak perlu pada seluruh komponen anak, secara drastis menurunkan performa rendering aplikasi di sisi pengguna. Menggunakan `useState` dasar untuk objek besar juga sering kali memicu kesalahan karena kita harus selalu menyalin seluruh *state* lama (`...state`) sebelum memperbarui satu properti. Kehilangan satu referensi saja dapat mengakibatkan *bug* mutasi data yang sangat sulit dilacak selama proses *debugging*.

Instalasi

Installation
Karena solusi ini menggunakan fitur bawaan dari ekosistem inti React, tidak ada dependensi eksternal
tambahan yang perlu dipasang lewat NPM atau Yarn. Anda hanya perlu memastikan bahwa proyek Anda
menggunakan versi React 16.8 atau yang lebih baru:

npm install react@latest react-dom@latest

Cuplikan Kode

import React, { createContext, useReducer, useContext } from 'react'; // 1. Definisi
State Awal const initialState = { items: [], total: 0 }; // 2. Reducer untuk
Menangani Aksi function cartReducer(state, action) { switch (action.type) { case
'ADD_ITEM': const updatedItems = [...state.items, action.payload]; const updatedTotal
= state.total + action.payload.price; return { ...state, items: updatedItems, total:
updatedTotal }; case 'CLEAR_CART': return initialState; default: return state; } } //
3. Pembuatan Context const CartContext = createContext(); // 4. Provider Component
export function CartProvider({ children }) { const [state, dispatch] =
useReducer(cartReducer, initialState); return ( <CartContext.Provider
value={ { state, dispatch } }> {children} </CartContext.Provider> ); } // 5. Custom
Hook untuk Menggunakan State export const useCart = () => useContext(CartContext);

Solusi

Arsitektur Deklaratif Menggunakan useReducer dan Context API Solusi elegan untuk mengatasi masalah ini tanpa menyertakan pustaka pihak ketiga yang berat (seperti Redux) adalah dengan memadukan useReducer dan Context API bawaan React. Hubungan kedua fitur ini menciptakan mesin penangan status (*state machine*) lokal yang sangat tangguh. `useReducer` memisahkan logika pembaruan data dari komponen UI ke dalam fungsi murni (*reducer*), sedangkan `Context API` bertugas mendistribusikan *state* dan fungsi pemanggil aksi (*dispatch*) tersebut ke seluruh tingkat komponen secara instan, mengeliminasi total kebutuhan *prop drilling*.

Penjelasan

Mari kita bedah arsitektur di atas secara mendalam agar mudah dipahami: Fungsi Reducer (`cartReducer`): Merupakan sebuah fungsi murni yang menerima status saat ini beserta sebuah objek tindakan (*action*). Berdasarkan tipe aksi yang dikirim (`ADD_ITEM`), fungsi ini akan menghasilkan objek status baru yang sepenuhnya segar tanpa memutasi status asli secara langsung. CartContext & CartProvider: Bertindak sebagai stasiun pusat penyiaran data. Komponen apa pun yang dibungkus di dalam `` kini dapat langsung memanggil data keranjang belanja secara mandiri tanpa bantuan komponen perantara. Custom Hook (`useCart`): Abstraksi tingkat tinggi yang menyederhanakan pemanggilan Context di sisi komponen UI. Alih-alih menulis kode berulang, developer cukup memanggil `const { state, dispatch } = useCart()` pada baris tunggal di komponen mana pun.

Tag: