React Hooks: Menguasai useReducer (Panduan Santai)

Halo Rekan Coder! 👋

Saya yakin kita semua pasti sering banget pakai useState. Hook ini simpel, bersih, dan cukup untuk kebanyakan kasus. Tapi… masalah muncul ketika komponen kita mulai “gendut”.

Tiba-tiba kamu punya lima useState berbeda, dan kalau mau update satu state, kamu harus cek tiga state lainnya. Fungsi handleUpdate kamu jadi ruwet kayak kabel earphone di dalam saku. 🍝

Kenalan yuk sama useReducer.

Namanya mungkin terdengar seram karena mengingatkan kita sama Redux (yang emang agak intimidatif buat pemula), tapi percayalah, useReducer itu sebenernya “bestie” banget kalau udah kenal.

Mari kita bedah pelan-pelan.

Apa itu useReducer?

Bayangkan useState itu kayak saklar lampu. Kamu “klik”, nyala. “Klik” lagi, mati. Kontrol langsung dan sederhana.

Nah, useReducer itu lebih kayak Buku Panduan (Instruction Manual) buat state kamu. Daripada kamu bilang “Ganti nilai jadi X”, kamu bilang “Woi React, tolong jalankan instruksi ‘INCREMENT’“.

Ini memungkinkan kamu memindahkan logika perubahan state KELUAR dari komponen. Jadi komponen kamu tetap bersih.

1. Persiapannya

Buat pakai hook ini, kamu butuh tiga hal:

1. The State: Data kamu (contoh: { count: 0 }).
2. The Action: Sebuah pesan yang menjelaskan “apa yang terjadi” (contoh: { type: 'INCREMENT' }).
3. The Reducer: Sebuah fungsi (function) yang menerima state saat ini + action, dan mengembalikan state BARU.

Kita lihat dulu fungsi Reducer-nya.

// Fungsi ini gak perlu ada di dalam komponen! Bisa ditaruh di luar.
const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    case "RESET":
      return { count: 0 };
    default:
      return state;
  }
};

Lihat kan? Ini cuma fungsi JavaScript biasa (pure function). Gak ada magic React di dalamnya. Cuma terima (state, action) terus balikin newState.

2. Cara Pakainya

Sekarang, ayo kita pasang di komponen kita.

import { useReducer } from "react";

// pakai fungsi reducer yang tadi
// const reducer = ...

const Counter = () => {
  // 1. Inisialisasi hook
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      {/* 2. Dispatch actions, jangan set state langsung */}
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
      <button onClick={() => dispatch({ type: "RESET" })}>Reset</button>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
    </div>
  );
};

Perhatikan, kita gak pakai setCount(count + 1). Kita pakai dispatch({ type: "INCREMENT" }). Kita cuma kirim pesan. Si reducer yang bakal mikirin logika perubahannya.

Kenapa harus repot-repot? Kodenya jadi lebih panjang!

Betul banget. Untuk counter sederhana kayak di atas, useState jelas lebih baik. Tapi useReducer bakal bersinar terang ketika:

1. State-nya kompleks: Kamu punya object dengan banyak properti bersarang (nested).
2. Update yang saling ketergantungan: Contoh, “Kalau ‘Status’ berubah jadi ‘Success’, hapus juga ‘Error’ dan set ‘Loading’ jadi false”.
3. Testing: Kamu bisa ngetes fungsi reducer secara terpisah tanpa harus render komponennya!

Skenario Dunia Nyata: Form

Bayangkan sebuah form dengan name, email, loading, dan error. Pakai useState, kamu mungkin butuh 4 hook. Atau satu object besar yang harus kamu spread ...state setiap kali update.

Pakai useReducer:

// Satu update menangani banyak perubahan sekaligus dengan rapi
case "LOGIN_SUCCESS":
  return {
    ...state,
    loading: false,
    user: action.payload,
    error: null
  };

Ini bikin event handler kamu bersih. handleSubmit kamu cuma perlu dispatch satu action, dan biarkan reducer yang membereskan sisanya.

Penutup

Jangan takut sama useReducer. Kamu gak harus pakai ini di mana-mana.

• Mulai aja dulu dengan useState.
• Kalau logika state kamu mulai ruwet kayak kabel kusut…
• Baru refactor ke useReducer.

Ini adalah alat yang sangat powerful di sabuk perkakas React kamu. 🛠️

Happy Coding! 🚀