State Management pada Web Modern

Masalah state management biasanya bukan “library mana yang terbaik”, melainkan data mana yang hidup di URL, komponen, cache server, atau penyimpanan global. Salah menaruh state membuat aplikasi sulit dipahami dan mudah tidak sinkron.

Taruh state sedekat mungkin dengan pemakainya

Dropdown yang hanya dipakai satu komponen tidak perlu masuk global store. State global menambah coupling dan membuat perubahan kecil memicu render atau subscriber yang tidak relevan.

Server state berbeda dari client state

Data produk dari API memiliki masalah cache, stale time, retry, deduplication, dan invalidation. Library query cache menangani masalah ini lebih baik daripada menyalin semua respons API ke store global.

const products = useQuery({
  queryKey: ['products', filters],
  queryFn: () => api.getProducts(filters),
  staleTime: 30_000,
});
const update = useMutation({
  mutationFn: api.updateProduct,
  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['products'] }),
});

Hindari derived state ganda

// Jangan simpan filteredProducts jika bisa dihitung.
const filteredProducts = useMemo(
  () => products.filter(item => item.name.includes(keyword)),
  [products, keyword]
);

Ukur render dan ukuran bundle

Optimasi state hanya berguna jika mengurangi pekerjaan nyata. Gunakan profiler untuk melihat komponen yang sering render, periksa selector store, dan jangan mememoisasi semua hal tanpa bukti.

Arsitektur yang sehat biasanya menggunakan beberapa mekanisme kecil, bukan satu global store untuk seluruh aplikasi.