Tujuan Pembelajaran

Memahami perbedaan server state dan client state
Bisa memilih tool yang tepat
Mengerti caching strategy untuk server state

Analogi

Diagram


      State Types:
├── Server State -> Async, remote, cacheable -> TanStack Query
├── Client State -> Sync, local, reactive -> Zustand/Jotai
├── URL State -> Shareable, bookmarkable -> React Router
└── Form State -> Temporary, validated -> React Hook Form

Tidak semua state sama — server state butuh caching dan synchronization, client state butuh reactivity

Penjelasan Konsep

Salah satu keputusan arsitektur paling penting di frontend adalah: bagaimana mengelola state? Tapi sebelum memilih tool, kamu harus memahami bahwa tidak semua state itu sama. Ada 4 jenis state yang berbeda, dan masing-masing butuh pendekatan berbeda.

Server State

Data yang berasal dari server — async, remote, cacheable, normalized. Contoh: user profile, product list.

Client State

Data yang hanya ada di browser — sync, local, reactive.

Contoh: theme (dark/light), sidebar open/close.

URL State

State yang tercermin di URL — shareable, bookmarkable. Contoh: search query, page number, filter aktif.

Form State

State sementara saat user mengisi form — temporary, validated. Contoh: input text, validation error.

Rule of Thumb

Server State -> TanStack Query/SWR. Client Global State -> Zustand/Jotai.

URL State -> React Router search params. Form State -> React Hook Form. Local Component State -> useState/useReducer.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan server state dan client state., bisa memilih tool yang tepat., dan mengerti caching strategy untuk server state. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Server State vs Client State, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Tidak semua state sama — server state butuh caching dan synchronization, client state butuh reactivity. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. TanStack Query handle caching, deduping, background refetch, dan garbage collection. Zustand hanya untuk state yang benar-benar client-side.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

// ❌ Jangan: simpan server state di global store
const useStore = create((set) => ({
  users: [],
  fetchUsers: async () => {
    const res = await fetch('/api/users');
    set({ users: await res.json() }); // No caching!
  },
}));

// ✅ Do: gunakan TanStack Query untuk server state
import { useQuery } from '@tanstack/react-query';
function useUsers() {
  return useQuery({
    queryKey: ['users'],
    queryFn: async () => { const res = await fetch('/api/users'); return res.json(); },
    staleTime: 1000 * 60 * 5,
  });
}

// ✅ Do: gunakan Zustand untuk client state
const useThemeStore = create((set) => ({
  theme: 'light',
  toggle: () => set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),
}));

Penjelasan Kode

TanStack Query handle caching, deduping, background refetch, dan garbage collection. Zustand hanya untuk state yang benar-benar client-side.

Prompt AI

Audit state management di aplikasimu. Klasifikasikan setiap state: server, client, URL, atau form. Apakah kamu menggunakan tool yang tepat?

Pertanyaan Reflektif

Most state is server state — tapi kebanyakan developer default ke Redux untuk semuanya. Itu adalah over-engineering.