Pakai Redux, Zustand, Context, TanStack Query, atau useState?

State apa ini?
Siapa owner-nya?
Berapa lama lifecycle-nya?
Siapa yang boleh mengubahnya?
Apakah data ini canonical atau derived?
Apakah sumber kebenarannya ada di client, URL, server, browser, atau external system?
Bagaimana invalidation-nya?
Apa failure mode paling mahal jika state ini salah tempat?

UI toggle disimpan di global store.
Server response disimpan di context.
Form draft disamakan dengan entity canonical.
Permission diperlakukan sebagai boolean lokal.
URL filter disimpan hanya di component state.
Async mutation diperlakukan sebagai satu flag isLoading.
Workflow multi-step disusun dari 11 useState tanpa transition invariant.

State adalah fakta sementara atau canonical yang memengaruhi UI,
memiliki owner,
lifecycle,
aturan update,
aturan invalidation,
dan konsekuensi ketika nilainya salah.

Modal open salah -> annoying.
Permission salah -> security bug.
Cache server basi -> data integrity risk.
Form draft hilang -> user trust issue.
Workflow stuck -> business process failure.
URL state tidak sinkron -> shareability/back-navigation rusak.

Local state       -> dekatkan ke component yang memakai.
Shared state      -> naikkan ke owner bersama atau scoped store.
Derived state     -> hitung dari source, jangan duplikasi.
Server state      -> cache, revalidate, invalidate.
URL state         -> jadikan alamat UI yang shareable.
Persistent state  -> simpan hati-hati, versioning, privacy.
External state    -> subscribe dengan contract aman.
Workflow state    -> modelkan sebagai transition graph.
Capability state  -> pass sebagai dependency, bukan data volatile.
Ephemeral state   -> jangan naikkan jika tidak perlu.

isPopoverOpen
activeTab dalam isolated Tabs
input draft lokal
hover/focus visual state
expanded row dalam table kecil
selected option dalam uncontrolled widget

Jika state hanya dibaca dan diubah oleh satu component/subtree kecil,
jangan naikkan.

scope kecil,
rerender terbatas,
owner jelas,
test sederhana,
removal mudah,
dan tidak menciptakan coupling global.

function Disclosure() {
  const [open, setOpen] = useState(false);

  return (
    <section>
      <button onClick={() => setOpen(value => !value)}>
        {open ? 'Hide' : 'Show'} details
      </button>
      {open ? <p>Advanced details...</p> : null}
    </section>
  );
}

// Buruk: state lokal dipromosikan ke global store tanpa alasan.
const open = useAppStore(state => state.sidebar.open);
const setOpen = useAppStore(state => state.sidebar.setOpen);

Visibility yang terlalu besar meningkatkan coupling.
Coupling meningkatkan biaya refactor.

fullName = firstName + lastName
visibleItems = items filtered by query
isSubmitDisabled = !isValid || isPending
selectedItem = items.find(id)
totalPrice = cartLines sum

Jika bisa dihitung secara deterministic dari state/props yang sudah ada,
jangan simpan sebagai state canonical.

function CartSummary({ lines }: { lines: CartLine[] }) {
  const [total, setTotal] = useState(0);

  useEffect(() => {
    setTotal(lines.reduce((sum, line) => sum + line.price * line.qty, 0));
  }, [lines]);

  return <strong>{total}</strong>;
}

render pertama punya total lama/default,
ada extra render,
source of truth dobel,
effect dipakai untuk kalkulasi internal,
dan invariant total == sum(lines) bisa pecah sementara.

function CartSummary({ lines }: { lines: CartLine[] }) {
  const total = lines.reduce((sum, line) => sum + line.price * line.qty, 0);

  return <strong>{total}</strong>;
}

const total = useMemo(() => computeExpensiveTotal(lines), [lines]);

selected rows di table + toolbar + bulk action dialog
wizard progress dibaca header/sidebar/content
draft filter dipakai filter panel + result summary
layout sidebar state dipakai shell + keyboard shortcut
cart lokal sebelum checkout

Apakah state harus shared karena memang domain-nya shared,
atau karena component tree saat ini kebetulan menyulitkan props?

function SearchPage() {
  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());

  return (
    <>
      <ResultToolbar selectedCount={selectedIds.size} onClear={() => setSelectedIds(new Set())} />
      <ResultTable selectedIds={selectedIds} onSelectionChange={setSelectedIds} />
    </>
  );
}

user profile dari API
invoice list dari backend
permission policy dari auth service
case details dari regulatory case service
notification count dari server

const UserContext = createContext<User | null>(null);

cache policy tidak jelas,
stale time tidak jelas,
refetch tidak standar,
mutation invalidation manual,
loading/error tersebar,
duplicate fetch mudah terjadi.

function useUserProfile(userId: string) {
  return useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUserProfile(userId),
    staleTime: 60_000,
  });
}

/search?q=react&page=2&sort=recent
/cases?status=open&assignee=me
/orders?tab=failed
/invoices/123?panel=history

shareable,
bookmarkable,
back/forward-aware,
refresh-safe,
deep-linkable,
atau menjadi identity query server.

const [page, setPage] = useState(1);
const [sort, setSort] = useState('recent');
const [query, setQuery] = useState('');

refresh reset filter,
copy URL tidak membawa context,
back button tidak bekerja benar,
analytics/navigation sulit,
query cache key terpisah dari route identity.

function useSearchRouteState() {
  const [params, setParams] = useSearchParams();

  return {
    query: params.get('q') ?? '',
    page: Number(params.get('page') ?? 1),
    sort: params.get('sort') ?? 'recent',
    setQuery(query: string) {
      setParams(previous => {
        const next = new URLSearchParams(previous);
        next.set('q', query);
        next.set('page', '1');
        return next;
      });
    },
  };
}

theme preference
sidebar collapsed preference
last selected workspace
draft offline form
feature onboarding dismissed
local-only queue

Persist hanya state yang benar-benar boleh hidup melewati reload/session.

Apakah data sensitif?
Apakah boleh dibaca extension/user lain?
Apakah ada expiry?
Apakah schema berubah antar versi?
Apakah data terkait user tertentu?
Apakah perlu clear saat logout?

function createJsonStorage<T>(key: string, fallback: T) {
  return {
    read(): T {
      const raw = window.localStorage.getItem(key);
      if (!raw) return fallback;
      try {
        return JSON.parse(raw) as T;
      } catch {
        return fallback;
      }
    },
    write(value: T) {
      window.localStorage.setItem(key, JSON.stringify(value));
    },
  };
}

browser online/offline status
media query store
WebSocket connection state
legacy observable store
custom event emitter
shared worker state
multi-tab broadcast channel state
Zustand/Redux store

getSnapshot harus mengembalikan snapshot konsisten.
subscribe harus cleanup.
React harus tahu kapan snapshot berubah.
SSR snapshot harus bisa disediakan jika perlu.

function subscribe(callback: () => void) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);

  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

function getSnapshot() {
  return navigator.onLine;
}

function useOnlineStatus() {
  return useSyncExternalStore(subscribe, getSnapshot, () => true);
}

idle -> editing -> validating -> submitting -> succeeded
idle -> loading -> loaded -> refreshing -> failed
draft -> pendingApproval -> approved -> rejected
selecting -> confirming -> executing -> completed

const [isLoading, setLoading] = useState(false);
const [isSubmitting, setSubmitting] = useState(false);
const [isSuccess, setSuccess] = useState(false);
const [error, setError] = useState<Error | null>(null);

isLoading = true
isSuccess = true
error != null
isSubmitting = true

type SaveState =
  | { status: 'idle' }
  | { status: 'saving' }
  | { status: 'saved'; savedAt: Date }
  | { status: 'failed'; error: Error };

type SaveEvent =
  | { type: 'submit' }
  | { type: 'resolve'; savedAt: Date }
  | { type: 'reject'; error: Error }
  | { type: 'retry' };

analytics.track
permission.can
modal.open
toast.show
logger.error
clock.now
idGenerator.next
featureFlags.isEnabled
apiClient

subtree butuh dependency,
value jarang berubah,
provider scope eksplisit,
test bisa override dependency,
dan consumer tidak perlu prop drilling capability ke semua lapisan.

type PermissionCapability = {
  can(action: string, resource: string): boolean;
};

const PermissionContext = createContext<PermissionCapability | null>(null);

function usePermission() {
  const value = useContext(PermissionContext);
  if (!value) throw new Error('usePermission must be used inside PermissionProvider');
  return value;
}

Policy data -> server/cache state.
can() API   -> capability interface.

pointer down coordinates
drag hover target
last focused element
animation frame id
temporary timeout id
composing IME status
current AbortController

function DragBox() {
  const startRef = useRef<{ x: number; y: number } | null>(null);

  function onPointerDown(event: React.PointerEvent) {
    startRef.current = { x: event.clientX, y: event.clientY };
  }

  function onPointerUp() {
    startRef.current = null;
  }

  return <div onPointerDown={onPointerDown} onPointerUp={onPointerUp} />;
}

const [dragging, setDragging] = useState(false);

Canonical = sumber kebenaran.
Cached    = salinan untuk performa/freshness boundary.
Derived   = hasil hitung dari canonical/cached.

Server DB          -> canonical orders
TanStack Query     -> cached server state
visibleOrders      -> derived filtered list
selectedOrderIds   -> client state
page/sort/filter   -> URL state

Context contains user, permissions, invoices, filters, modal, toast,
selected IDs, loading flags, mutation errors, and form draft.

taxonomy missing.

server entities -> query cache
capabilities -> context
page filters -> URL
selection -> page/local state
workflow -> reducer/machine

observability,
time travel,
cross-route coordination,
external access,
large shared client model,
team governance.

useEffect(() => {
  setLocalValue(props.value);
}, [props.value]);

[ ] State ini canonical, cached, derived, atau ephemeral?
[ ] Source of truth-nya jelas?
[ ] Owner-nya satu?
[ ] Update path-nya eksplisit?
[ ] Invalidation rule-nya tertulis?
[ ] Lifecycle-nya sesuai storage/hook/tool?
[ ] State ini perlu URL/shareability?
[ ] State ini server-owned?
[ ] State ini sebenarnya capability/dependency?
[ ] State ini bisa dihitung dari data lain?
[ ] Ada illegal state yang mungkin muncul?
[ ] Ada effect yang hanya menyalin state internal?
[ ] Ada hidden dependency lewat context/store?
[ ] Ada risiko stale cache/security/data integrity?

Letakkan state di scope terkecil yang masih bisa menjaga invariant.

Jika child hanya mengirim intent,
parent/domain boundary memutuskan next state.

1. `isTooltipOpen`
2. `currentUser.profile`
3. `invoiceSearch.sort`
4. `checkoutStep`
5. `draftComment`
6. `onlineStatus`
7. `themePreference`
8. `canApproveCase`
9. `selectedTableRows`
10. `modalService.openConfirm`

Jangan mulai dari tool.
Mulai dari jenis state.

Local UI state        -> useState/useReducer/ref.
Derived state         -> calculate/select.
Shared client state   -> lift/context/scoped store.
Server state          -> query/cache/invalidation.
URL state             -> router/search params.
Persistent state      -> storage adapter with versioning.
External state        -> useSyncExternalStore/subscription.
Workflow state        -> reducer/state machine.
Capability state      -> context/DI provider.
Ephemeral state       -> ref/local short lifecycle.