Ngatur State ing React: Pandhuan Lengkap

Milih cara ngatur state sing pas kuwi penting kanggo aplikasi React. Ayo deleng pilihane.

State Lokal

Kanggo state prasaja ing siji komponen, gunakake useState:

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

State saka Server

Kanggo data saka API, gunakake React Query utawa 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

Kanggo state sing dienggo bareng antarkomponen, coba pendekatan iki.

Zustand

Zustand nyedhiyakake store cilik sing bisa dienggo bareng:

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 kanggo state global prasaja tanpa library tambahan.

Kapan Gunakake Sing Endi?

Kesimpulan

Miwitio saka cara sing prasaja. Tambah kerumitan mung yen pancen dibutuhake.