Panduan Lengkap Mengelola State di React: Cara Praktis untuk Developer

Apa Itu State di React?

Secara sederhana, state itu data yang dimiliki komponen. Kalau state berubah, React otomatis nge-render ulang bagian yang terkait.

Contoh gampang:

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

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

Di atas, count itu state lokal. Setiap kali tombol diklik, UI langsung update otomatis.

Jenis-Jenis State di React

1. Local State

Local state itu state yang cuma dipakai di satu komponen. Paling sering pakai useState atau useReducer. Cocok buat:

• Toggle modal

• Input form

• Status loading atau error

Kalau state mulai kompleks, bisa pakai useReducer:

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:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>Tambah</button>
      <button onClick={() => dispatch({ type: "decrement" })}>Kurang</button>
    </div>
  );
}

2. Lifting State Up

Kadang beberapa komponen butuh data yang sama. Solusinya, angkat state ke parent.

function Parent() {
  const [value, setValue] = useState("");

  return <Child value={value} setValue={setValue} />;
}

Dengan begini, data tetap konsisten di seluruh child component.

3. Global State

Kalau data harus diakses banyak komponen, baru deh pakai global state. Beberapa opsi:

• Context API → built-in React, gampang buat aplikasi kecil/menengah

• Redux → cocok buat aplikasi besar

• Zustand / Recoil / Jotai → modern, ringan, lebih simpel daripada Redux

Contoh sederhana pakai Context API:

import React, { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

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

function Button() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Toggle Theme
    </button>
  );
}

4. Server State

Server state adalah data dari backend, misal lewat API. Kadang tricky karena harus di-handle loading, error, dan cache.

Library yang populer:

• React Query

• SWR

Contoh pakai React Query:

import { useQuery } from "@tanstack/react-query";

function Users() {
  const { data, error, isLoading } = useQuery(["users"], fetchUsers);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

5. URL State

Kadang data disimpan di URL, misal filter atau pagination. Bisa pakai React Router:

import { useSearchParams } from "react-router-dom";

function Filter() {
  const [searchParams, setSearchParams] = useSearchParams();
  const filter = searchParams.get("filter") || "all";

  return (
    <button onClick={() => setSearchParams({ filter: "active" })}>
      Set Filter Active
    </button>
  );
}

Tips Mengelola State di React Agar Nggak Ribet

1. Pakailah state lokal dulu sebelum memutuskan pakai global state.

2. Jangan pakai global state untuk semua data. Gunakan hanya untuk data yang dibutuhkan banyak komponen.

3. Pisahkan state berdasarkan domain. Misal: user, product, cart, dll.

4. Gunakan React Query / SWR untuk data dari API. Lebih gampang nge-handle loading, error, dan cache.

5. Gunakan DevTools untuk debug:

   • Redux DevTools buat Redux

   • React DevTools buat state lokal dan props

Kesimpulan

State management di React itu penting banget. Pilih strategi yang sesuai dengan kebutuhan aplikasi:

• Small apps → useState / useReducer

• Medium apps → Context API atau library ringan

• Large apps → Redux atau Recoil/Zustand

Dengan pengelolaan state yang tepat, aplikasi React kamu bakal lebih stabil, mudah dikembangkan, dan scalable.