Mengelola Banyak State dalam Satu Komponen React Tanpa Pusing

Pernah Ngerasa Kodingan React Berantakan karena Banyak State?

Ketika bikin aplikasi React, pasti kita sering butuh menyimpan banyak data dalam satu komponen. Misalnya, form dengan banyak input, daftar produk, atau status loading dan error. Kalau nggak dikelola dengan baik, state bisa jadi berantakan dan susah di-maintain.

React menyediakan berbagai cara buat mengelola banyak state dalam satu komponen, dari useState(), useReducer(), sampai Context API. Nah, di artikel ini kita bakal bahas cara terbaik dan paling praktis buat mengatur banyak state supaya kode tetap rapi dan mudah dibaca!

1. Gunakan useState() untuk Banyak State yang Sederhana

Kalau state yang dikelola masih sederhana dan jumlahnya nggak terlalu banyak, kita bisa pakai useState() dengan beberapa variabel terpisah.

📌 Contoh State Terpisah dengan useState()

import React, { useState } from 'react';

function UserProfile() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(0);

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Nama" />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="number" value={age} onChange={(e) => setAge(Number(e.target.value))} placeholder="Usia" />
      <p>Halo, {name}! Email kamu: {email}, usia kamu: {age}</p>
    </div>
  );
}

export default UserProfile;

✅ Cocok digunakan jika jumlah state sedikit.
❌ Kurang efektif jika state makin banyak.

2. Gunakan useState() dengan Objek jika State Mulai Banyak

Kalau state mulai banyak, lebih baik kita gunakan satu objek state daripada membuat terlalu banyak useState().

📌 Contoh State dengan Objek

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: '', email: '', age: 0 });

  function handleChange(event) {
    const { name, value } = event.target;
    setUser({ ...user, [name]: value });
  }

  return (
    <div>
      <input type="text" name="name" value={user.name} onChange={handleChange} placeholder="Nama" />
      <input type="email" name="email" value={user.email} onChange={handleChange} placeholder="Email" />
      <input type="number" name="age" value={user.age} onChange={handleChange} placeholder="Usia" />
      <p>Halo, {user.name}! Email kamu: {user.email}, usia kamu: {user.age}</p>
    </div>
  );
}

export default UserProfile;

✅ Mengelola state lebih rapi dalam satu objek.
✅ Mengurangi jumlah pemanggilan setState().
❌ Perubahan hanya bisa dilakukan secara keseluruhan, bukan per field.

3. Gunakan useReducer() untuk State yang Lebih Kompleks

Kalau state makin kompleks, misalnya banyak kondisi atau punya hubungan logis satu sama lain, lebih baik gunakan useReducer().

📌 Contoh useReducer() untuk Mengelola Banyak State

import React, { useReducer } from 'react';

const initialState = { name: '', email: '', age: 0 };

function reducer(state, action) {
  return { ...state, [action.type]: action.value };
}

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

  function handleChange(event) {
    dispatch({ type: event.target.name, value: event.target.value });
  }

  return (
    <div>
      <input type="text" name="name" value={state.name} onChange={handleChange} placeholder="Nama" />
      <input type="email" name="email" value={state.email} onChange={handleChange} placeholder="Email" />
      <input type="number" name="age" value={state.age} onChange={handleChange} placeholder="Usia" />
      <p>Halo, {state.name}! Email kamu: {state.email}, usia kamu: {state.age}</p>
    </div>
  );
}

export default UserProfile;

✅ Cocok untuk state yang kompleks dengan banyak perubahan.
✅ Lebih terstruktur dibanding useState().
❌ Sedikit lebih verbose dibandingkan useState().

4. Gunakan Context API jika State Dipakai di Banyak Komponen

Kalau banyak state harus dibagikan ke beberapa komponen lain, Context API bisa jadi solusi terbaik.

📌 Contoh Penggunaan Context API

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

const UserContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState({ name: '', email: '', age: 0 });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

function Profile() {
  const { user } = useContext(UserContext);
  return <p>Halo, {user.name}! Email kamu: {user.email}, usia kamu: {user.age}</p>;
}

function UserProfile() {
  const { user, setUser } = useContext(UserContext);

  function handleChange(event) {
    setUser({ ...user, [event.target.name]: event.target.value });
  }

  return (
    <div>
      <input type="text" name="name" value={user.name} onChange={handleChange} placeholder="Nama" />
      <Profile />
    </div>
  );
}

function App() {
  return (
    <UserProvider>
      <UserProfile />
    </UserProvider>
  );
}

export default App;

✅ Cocok kalau state dibutuhkan di banyak komponen.
✅ Menghindari prop drilling.
❌ Sedikit lebih kompleks dibandingkan useState().

Kesimpulan

• Gunakan useState() jika state masih sederhana.
• Gunakan objek dalam useState() jika jumlah state mulai banyak.
• Gunakan useReducer() jika state makin kompleks dan punya banyak aksi.
• Gunakan Context API jika state perlu dipakai di banyak komponen.

Dengan memilih cara yang tepat untuk mengelola banyak state dalam React, kode kita bakal lebih bersih, efisien, dan mudah dikelola!