Mengelola State di React: Panduan Lengkap

Memilih cara mengelola state yang sesuai penting bagi aplikasi React. Mari lihat pilihannya.

State Lokal

Untuk state sederhana pada satu komponen, gunakan useState:

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

State dari Server

Untuk data yang berasal dari API, gunakan React Query atau SWR:

function UserProfile({ userId }) {
  const { data, isLoading } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId)
  });

  if (isLoading) return <Spinner />;
  return <div>{data.name}</div>;
}

State Global

Untuk state yang dipakai lintas komponen, pertimbangkan pendekatan berikut.

Zustand

Zustand menyediakan store kecil yang dapat dibagikan:

const useStore = create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 }))
}));

// Usage
function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
}

Context API

Context API cocok untuk state global sederhana tanpa library tambahan.

Kapan Menggunakan Apa?

Kesimpulan

Mulailah dari pendekatan sederhana. Tambahkan kompleksitas hanya ketika benar-benar dibutuhkan.