state di luar React,
component subscribe,
store berubah,
UI rerender.

- row tertentu rerender terus,
- UI kadang membaca state lama,
- hydration warning muncul hanya di production,
- listener leak setelah Strict Mode double mount,
- selector terlihat benar tapi selalu berubah,
- store singleton membawa data user sebelumnya,
- optimistic update hilang setelah rehydrate,
- command dipanggil dua kali,
- tab lain tidak sinkron,
- DevTools tidak membantu karena mutation tidak tercatat.

- Redux store
- Zustand store
- custom subscribe/getState store
- browser API state seperti online/offline status
- localStorage-backed state
- WebSocket session state
- BroadcastChannel state
- custom event emitter state
- URL/history adapter
- in-memory singleton cache

React harus bisa membaca snapshot yang konsisten.
React harus bisa subscribe dan unsubscribe dengan aman.
Snapshot yang sama harus punya identity stabil.
Perubahan store harus memberitahu React.
Server snapshot harus cocok dengan hydration jika SSR dipakai.

const snapshot = useSyncExternalStore(
  subscribe,
  getSnapshot,
  getServerSnapshot,
);

subscribe(callback)
  - mendaftarkan callback ke store,
  - memanggil callback saat store berubah,
  - mengembalikan unsubscribe function.

getSnapshot()
  - membaca current snapshot,
  - harus mengembalikan value yang sama secara identity jika data belum berubah,
  - tidak boleh selalu membuat object/array baru.

getServerSnapshot()
  - optional untuk client-only external store,
  - dibutuhkan jika component dirender di server,
  - value awal server harus match value saat hydration di client.

function useStore<T>(selector: (state: StoreState) => T): T {
  return useSyncExternalStore(
    store.subscribe,
    () => selector(store.getState()),
    () => selector(store.getInitialServerState()),
  );
}

- Component rerenders repeatedly.
- React warns that getSnapshot result should be cached.
- UI feels stuck in a render loop.

function getSnapshot() {
  return {
    todos: store.todos,
    selectedIds: store.selectedIds,
  };
}

type Snapshot = {
  todos: Todo[];
  selectedIds: ReadonlySet<string>;
};

let currentState = {
  todos: [] as Todo[],
  selectedIds: new Set<string>(),
};

let currentSnapshot: Snapshot = {
  todos: currentState.todos,
  selectedIds: currentState.selectedIds,
};

function getSnapshot() {
  return currentSnapshot;
}

function setState(updater: (state: typeof currentState) => typeof currentState) {
  const nextState = updater(currentState);
  if (Object.is(nextState, currentState)) return;

  currentState = nextState;
  currentSnapshot = {
    todos: currentState.todos,
    selectedIds: currentState.selectedIds,
  };

  emitChange();
}

If data did not change, snapshot identity must not change.

expect(getSnapshot()).toBe(getSnapshot());

- UI sometimes does not update.
- Selector sees changed nested data without store notification.
- Time-travel/debugging impossible.
- Previous state is accidentally modified.

function addTodo(todo: Todo) {
  state.todos.push(todo);
  listeners.forEach((listener) => listener());
}

function addTodo(todo: Todo) {
  state = {
    ...state,
    todos: [...state.todos, todo],
  };
  emitChange();
}

Unchanged branches preserve identity.
Changed branches receive new identity.
Root snapshot changes when observable state changes.

function freezeDev<T>(value: T): T {
  if (process.env.NODE_ENV !== 'production') {
    return Object.freeze(value);
  }
  return value;
}

- Two components render different values from the same store during one UI update.
- Derived data does not match base data.
- A concurrent render sees partial update.

function updateUserAndPermissions(user: User, permissions: Permission[]) {
  store.user = user;
  emitChange();
  store.permissions = permissions;
  emitChange();
}

new user + old permissions

function updateSession(next: { user: User; permissions: Permission[] }) {
  state = {
    ...state,
    user: next.user,
    permissions: next.permissions,
  };
  emitChange();
}

A store update should publish one coherent snapshot.
Do not emit after partial mutation.
Do not expose mutable internals while update is in progress.

- Store has more listeners than mounted components.
- Actions run multiple times.
- Memory grows over time.
- Strict Mode exposes duplicate behavior in development.

function subscribe(callback: () => void) {
  listeners.add(callback);
  // missing unsubscribe
}

function subscribe(callback: () => void) {
  window.addEventListener('storage', callback);
  return () => {
    window.removeEventListener('storage', () => callback());
  };
}

function subscribe(callback: () => void) {
  listeners.add(callback);
  return () => {
    listeners.delete(callback);
  };
}

function subscribe(callback: () => void) {
  const handler = () => callback();
  window.addEventListener('storage', handler);
  return () => window.removeEventListener('storage', handler);
}

Every subscribe must have exactly one corresponding unsubscribe path.
Cleanup must remove the exact registered listener.

const unsubscribe = subscribe(listener);
expect(listenerCount()).toBe(1);
unsubscribe();
expect(listenerCount()).toBe(0);

- Component unsubscribes/resubscribes every render.
- Performance degrades with many components.
- Store listeners churn despite no state change.

function useOnlineStatus(source: EventTarget) {
  return useSyncExternalStore(
    (callback) => {
      source.addEventListener('online', callback);
      return () => source.removeEventListener('online', callback);
    },
    () => navigator.onLine,
  );
}

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

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

function getOnlineSnapshot() {
  return navigator.onLine;
}

export function useOnlineStatus() {
  return useSyncExternalStore(subscribeOnline, getOnlineSnapshot, () => true);
}

function useRoomStore(roomId: string) {
  const store = useMemo(() => getRoomStore(roomId), [roomId]);

  return useSyncExternalStore(
    store.subscribe,
    store.getSnapshot,
    store.getServerSnapshot,
  );
}

Changing subscription identity should mean the external subscription target truly changed.

- Store state changes, but UI does not update.
- Refresh fixes UI.
- Some actions update UI, others do not.

function setState(partial: Partial<State>) {
  state = { ...state, ...partial };
  // forgot emitChange()
}

function setState(partial: Partial<State>) {
  const next = { ...state, ...partial };
  if (next === state) return;
  state = next;
  emitChange();
}

function setName(name: string) {
  state.user.name = name;
  if (state === previousState) return;
  emitChange();
}

function commit(next: State) {
  if (Object.is(next, state)) return;
  state = next;
  snapshot = next;
  for (const listener of listeners) listener();
}

function update(updater: (state: State) => State) {
  commit(updater(state));
}

No action mutates state except through the store commit function.

- Component rerenders on every store update.
- Selector seems to select same semantic data.
- Memoized child still rerenders.

const view = useStore((state) => ({
  name: state.user.name,
  canEdit: state.permissions.includes('edit'),
}));

const name = useStore((state) => state.user.name);
const canEdit = useStore((state) => state.permissions.includes('edit'));

const view = useStore(
  (state) => ({
    name: state.user.name,
    canEdit: state.permissions.includes('edit'),
  }),
  shallow,
);

const selectUserView = createSelector(
  [(state: State) => state.user.name, (state: State) => state.permissions],
  (name, permissions) => ({
    name,
    canEdit: permissions.includes('edit'),
  }),
);

Selector output identity should change only when the selected semantic value changes.

Selector returns {}, [], new Set(), new Map(), .filter(), .map() without memo/equality.

- UI misses updates.
- Component does not rerender when selected data changed.
- Equality optimization hides mutation bugs.

const user = useStore((state) => state.user, () => true);

function equalById(a: User, b: User) {
  return a.id === b.id;
}

const userLabel = useStore(
  (state) => ({ id: state.user.id, name: state.user.name }),
  shallow,
);

const userName = useStore((state) => state.user.name);

If rendered output would change, equality must return false.

- Component rerenders when unrelated store fields change.
- Large pages rerender after small interaction.
- Store update has huge blast radius.

function Toolbar() {
  const state = useWorkspaceStore();
  return <span>{state.selectedIds.length}</span>;
}

function Toolbar() {
  const selectedCount = useWorkspaceStore((state) => state.selectedIds.length);
  return <span>{selectedCount}</span>;
}

No production component should subscribe to full store unless it truly renders full store.

1. Use profiler.
2. Identify component rerender source.
3. Inspect selector width.
4. Narrow selector.
5. Add equality/memoization only after narrowing.

- Component reads store data but does not update when it changes.
- Action changes state, but UI remains stale.

function UserName() {
  const user = userStore.getState().user;
  return <span>{user.name}</span>;
}

function UserName() {
  const name = useUserStore((state) => state.user.name);
  return <span>{name}</span>;
}

function SaveButton() {
  const save = useSaveCommand();

  return (
    <button
      onClick={() => {
        const draft = editorStore.getState().draft;
        save(draft);
      }}
    >
      Save
    </button>
  );
}

If render output depends on external store state, component must subscribe to that dependency.

- Store updates during render.
- Infinite render loop.
- React purity violations.
- Behavior changes under Strict Mode/concurrent rendering.

function Guard({ user }: { user: User | null }) {
  const setUser = useSessionStore((state) => state.setUser);

  if (user) {
    setUser(user);
  }

  return null;
}

function Guard({ user }: { user: User | null }) {
  const setUser = useSessionStore((state) => state.setUser);

  useEffect(() => {
    if (user) setUser(user);
  }, [user, setUser]);

  return null;
}

If data can be derived from props/query/context, do not mirror it into external store.
If external system truly must be synchronized, use effect with cleanup/idempotency.

- Async action writes stale result.
- Fast repeated actions produce wrong final state.
- Latest request is overwritten by older response.

const useSearchStore = create<SearchState>((set) => ({
  query: '',
  results: [],
  async search(query) {
    set({ query });
    const results = await api.search(query);
    set({ results });
  },
}));

const useSearchStore = create<SearchState>((set, get) => ({
  query: '',
  requestId: null,
  results: [],

  async search(query) {
    const requestId = crypto.randomUUID();
    set({ query, requestId });

    const results = await api.search(query);

    if (get().requestId !== requestId) return;
    set({ results });
  },
}));

Async result may commit only if it still belongs to current request state.

- User A data appears after User B logs in.
- Tenant switch preserves old selection/preferences.
- Tests influence each other.
- SSR request data leaks across users.

export const useCaseStore = create<CaseStore>(() => ({
  selectedCaseIds: [],
  draftByCaseId: {},
}));

function TenantBoundary({ tenantId, children }: Props) {
  const reset = useCaseStore((state) => state.reset);

  useEffect(() => {
    reset();
  }, [tenantId, reset]);

  return children;
}

const StoreContext = createContext<StoreApi<CaseStore> | null>(null);

function CaseWorkspaceProvider({ caseId, children }: Props) {
  const storeRef = useRef<StoreApi<CaseStore> | null>(null);

  if (!storeRef.current) {
    storeRef.current = createCaseStore({ caseId });
  }

  return <StoreContext.Provider value={storeRef.current}>{children}</StoreContext.Provider>;
}

Store lifetime must not exceed the lifetime of data authority.

Never put per-request user data in module-level singleton store.
Create store per request or per client boundary.

- Hydration warning.
- UI flashes from default state to persisted state.
- Server rendered markup does not match client initial snapshot.

function getSnapshot() {
  return localStorage.getItem('theme') ?? 'light';
}

function ThemeIcon() {
  const theme = useSyncExternalStore(subscribeTheme, getSnapshot);
  return <span>{theme}</span>;
}

function getServerSnapshot() {
  return 'light';
}

function useTheme() {
  return useSyncExternalStore(subscribeTheme, getThemeSnapshot, getServerSnapshot);
}

<script>
  window.__INITIAL_THEME__ = "dark";
</script>

function ClientOnly({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return children;
}

Server snapshot must equal the first client hydration snapshot for server-rendered content.

- UI starts with default store state then jumps to persisted state.
- Actions happen before rehydrate finishes.
- Persisted schema old version crashes current UI.

Persist middleware means persistence is solved.

- storage key ownership,
- version,
- migration,
- partialize/whitelist,
- rehydrate status,
- logout cleanup,
- tenant cleanup,
- corrupt data fallback,
- sensitive data exclusion.

type StoreState = {
  hydration: 'pending' | 'ready' | 'failed';
  preferences: Preferences;
};

function PreferencesGate({ children }: { children: React.ReactNode }) {
  const hydration = usePreferencesStore((state) => state.hydration);

  if (hydration === 'pending') return <PreferencesSkeleton />;
  if (hydration === 'failed') return <PreferencesFallback />;

  return children;
}

UI that depends on persisted state must know whether persistence has been rehydrated.

- User logs out in one tab but another tab still looks authenticated.
- Preferences change in one tab but another tab stays stale.
- Draft conflict appears between tabs.

function subscribePreferences(callback: () => void) {
  const handler = (event: StorageEvent) => {
    if (event.key === 'preferences') callback();
  };

  window.addEventListener('storage', handler);
  return () => window.removeEventListener('storage', handler);
}

const channel = new BroadcastChannel('session');

function broadcastLogout() {
  channel.postMessage({ type: 'logout' });
}

function subscribeSession(callback: () => void) {
  const handler = (event: MessageEvent) => {
    if (event.data?.type === 'logout') callback();
  };

  channel.addEventListener('message', handler);
  return () => channel.removeEventListener('message', handler);
}

If state meaning crosses tab boundary, the store needs cross-tab invalidation or synchronization policy.

- Effect updates store.
- Store update rerenders component.
- Effect runs again.
- Infinite loop or repeated network calls.

function UserSync({ user }: { user: User }) {
  const session = useSessionStore((state) => state.session);
  const setSession = useSessionStore((state) => state.setSession);

  useEffect(() => {
    setSession({ user });
  }, [user, session, setSession]);

  return null;
}

useEffect(() => {
  setSessionFromUser(user);
}, [user, setSessionFromUser]);

setSessionFromUser(user) {
  const current = get().session.user;
  if (current?.id === user.id && current.version === user.version) return;
  set({ session: { user } });
}

Effects that synchronize external store must be idempotent.
Do not include target state as dependency unless the effect genuinely reacts to it.

- Component behavior depends on store not visible from props.
- Test setup requires many unrelated stores.
- Reusing component in another page breaks unexpectedly.
- Feature A changes store and Feature B changes behavior silently.

function SubmitButton() {
  const canSubmit = useWorkflowStore((state) => state.canSubmit);
  return <button disabled={!canSubmit}>Submit</button>;
}

function SubmitButton({ disabled }: { disabled: boolean }) {
  return <button disabled={disabled}>Submit</button>;
}

function SubmitButtonContainer() {
  const canSubmit = useWorkflowStore((state) => state.canSubmit);
  return <SubmitButton disabled={!canSubmit} />;
}

Reusable components should not depend on app-global stores unless that dependency is part of their public contract.

Store-aware components belong at feature/application boundary.
Pure/reusable components receive props.

- Store has loading/error/data/lastFetchedAt/stale flags for many endpoints.
- Invalidation is inconsistent.
- Duplicate fetches happen.
- Optimistic updates conflict with refetches.
- Cache bugs dominate feature work.

type UserStore = {
  users: Record<string, User>;
  loadingById: Record<string, boolean>;
  errorById: Record<string, string | null>;
  lastFetchedAtById: Record<string, number>;
  fetchUser(id: string): Promise<void>;
  invalidateUser(id: string): void;
};

- TanStack Query
- RTK Query
- framework loader/cache if appropriate

selected IDs
open panels
draft-only UI state
workflow state
local preferences

If server is authority, client store should not become long-lived source of truth unless it implements cache lifecycle deliberately.

- Store memory grows during navigation.
- Old entities never removed.
- Closed workspaces still keep drafts/listeners.
- Performance degrades over long sessions.

- reset on logout,
- reset on tenant switch,
- reset on route leave,
- LRU/TTL for cached client state,
- dispose scoped store on unmount,
- remove entity when workflow finishes.

function WorkspaceRoute({ workspaceId }: Props) {
  const resetWorkspace = useWorkspaceStore((state) => state.resetWorkspace);

  useEffect(() => {
    return () => resetWorkspace(workspaceId);
  }, [workspaceId, resetWorkspace]);

  return <Workspace />;
}

Every external store must have a lifetime policy.

- One store action does validation, API call, navigation, toast, analytics, cache update, and state mutation.
- Tests become integration-heavy.
- Reusing action in another context causes unintended side effects.

async function approveCase(id: string) {
  set({ status: 'submitting' });
  await api.approve(id);
  queryClient.invalidateQueries(['case', id]);
  analytics.track('case_approved');
  toast.success('Approved');
  navigate('/cases');
  set({ status: 'done' });
}

Store action:
  transition local workflow state.

Mutation layer:
  call server and invalidate cache.

Orchestration hook:
  combine command, toast, navigation, analytics.

function useApproveCaseCommand(caseId: string) {
  const markSubmitting = useApprovalStore((s) => s.markSubmitting);
  const markFailed = useApprovalStore((s) => s.markFailed);
  const mutation = useApproveCaseMutation();
  const toast = useToast();
  const navigate = useNavigate();

  return async function approve() {
    markSubmitting(caseId);

    try {
      await mutation.mutateAsync(caseId);
      toast.success('Case approved');
      navigate('/cases');
    } catch (error) {
      markFailed(caseId, toMessage(error));
    }
  };
}

Store action should not become a hidden application service unless that is an explicit architecture decision.

- Tests pass individually but fail together.
- Store state leaks between tests.
- Tests require manual cleanup everywhere.

afterEach(() => {
  useSelectionStore.getState().reset();
});

function createTestStore(overrides?: Partial<State>) {
  return createStore<State>(() => ({
    ...initialState,
    ...overrides,
  }));
}

render(
  <StoreProvider store={createTestStore()}>
    <Feature />
  </StoreProvider>,
);

Tests must control store initial state and store lifetime.

- Store allows impossible states.
- UI has many booleans that conflict.
- Edge cases require if statements everywhere.

type UploadState = {
  isIdle: boolean;
  isUploading: boolean;
  isSuccess: boolean;
  isError: boolean;
  error?: string;
};

isUploading=true and isSuccess=true
isIdle=true and error present
isError=false and error present

type UploadState =
  | { status: 'idle' }
  | { status: 'uploading'; requestId: string }
  | { status: 'success'; fileId: string }
  | { status: 'error'; message: string };

State shape should make illegal states impossible or at least hard to represent.

- DevTools show state changed, but not why.
- Timeline misses side effects.
- Store mutation happened outside named action.

- command/action name,
- payload summary,
- previous relevant state,
- next relevant state,
- request ID,
- user/session/tenant boundary when allowed,
- error outcome,
- duration for async command.

function namedSet(actionName: string, updater: (state: State) => State) {
  const prev = state;
  const next = updater(prev);
  state = next;
  logStoreTransition({ actionName, prev, next });
  emitChange();
}

If external store state matters for debugging, mutations need names.

Does UI fail to update?
Does UI update too much?
Does UI show impossible state?
Does issue happen only SSR/hydration?
Does issue happen after navigation/logout/tenant switch?
Does issue happen after async race?
Does issue happen across tabs?

Which selector does the component use?
Does it subscribe to full store?
Does selector allocate new object/array?
Does equality match rendered dependency?

Is state mutated in place?
Is emitChange called exactly once after atomic commit?
Does action publish coherent snapshot?
Is async result guarded by request ID?

Is store singleton or scoped?
When does it reset?
Does it leak across users/tests/routes?
Does SSR create per-request state?

Does store mirror server data?
Does persisted state have version/migration?
Does cross-tab state sync matter?
Does effect create update loop?

Narrow selector before adding memoization.
Fix snapshot identity before adding equality hacks.
Fix ownership before adding reset effects.
Use query cache before rebuilding server cache.
Use scoped store before adding global cleanup hacks.

[ ] State category is client-owned, not secretly server-owned.
[ ] Store lifetime is defined.
[ ] Reset policy exists for logout/tenant/route/workspace if relevant.
[ ] Snapshot identity is stable when data does not change.
[ ] Updates are atomic and publish coherent snapshots.
[ ] Subscriptions return correct cleanup.
[ ] Render reads subscribe; event-only reads may use getState.
[ ] Selectors are narrow.
[ ] Selectors do not allocate unstable values without equality/memoization.
[ ] Equality function matches rendered dependency.
[ ] Async actions guard stale results.
[ ] Persistence has version, migration, whitelist, and corrupt-data fallback.
[ ] SSR/hydration snapshot policy is explicit.
[ ] Cross-tab sync policy exists if state crosses tab boundary.
[ ] Store mutations have names if debugging/audit matters.
[ ] Reusable components do not import app-global stores accidentally.
[ ] Tests can create/reset store deterministically.

const state = useStore();

useStore((s) => ({ a: s.a, b: s.b }))

store.getState() inside render

setStore(...) inside component body

localStorage read during server render

create(...) at module level with request/session data

state.serverUsers = response.users

AppStore contains auth, theme, filters, form drafts, notifications, workflow, API cache

type Listener = () => void;

type StoreApi<State> = {
  getSnapshot(): State;
  subscribe(listener: Listener): () => void;
  update(actionName: string, updater: (state: State) => State): void;
  reset(): void;
};

export function createExternalStore<State>(initialState: State): StoreApi<State> {
  let state = initialState;
  const listeners = new Set<Listener>();

  function emit() {
    for (const listener of Array.from(listeners)) {
      listener();
    }
  }

  return {
    getSnapshot() {
      return state;
    },

    subscribe(listener) {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },

    update(actionName, updater) {
      const next = updater(state);
      if (Object.is(next, state)) return;

      const previous = state;
      state = next;

      if (process.env.NODE_ENV !== 'production') {
        console.debug('[store]', actionName, { previous, next });
      }

      emit();
    },

    reset() {
      if (Object.is(state, initialState)) return;
      state = initialState;
      emit();
    },
  };
}

function useExternalSelector<State, Selected>(
  store: StoreApi<State>,
  selector: (state: State) => Selected,
): Selected {
  return useSyncExternalStore(
    store.subscribe,
    () => selector(store.getSnapshot()),
    () => selector(store.getSnapshot()),
  );
}

A store is not just a variable.
A store is a contract: snapshot, subscription, atomic commit, lifetime, and observability.

- hidden mutation,
- inconsistent action naming,
- selector instability,
- lifetime leakage,
- weak observability.

- putting too much local state globally,
- manual server cache in slices,
- action boilerplate for trivial state,
- selector overengineering,
- normalized state without ownership clarity.

- return whole store,
- return new object,
- return filtered/mapped array,
- use equality incorrectly,
- read store directly in render.

- when it is created,
- who owns it,
- when it resets,
- whether it survives route change,
- whether it survives logout,
- whether it survives tenant switch,
- whether it survives tests,
- whether it is safe for SSR.

- requestId,
- cancellation or ignore-stale-result guard,
- pending/error state,
- test for out-of-order response.

- migration,
- corrupt data fallback,
- logout cleanup,
- hydration-ready state.

External store is not just global state.
It is a contract between React render and non-React state.

getSnapshot must be stable.
subscribe must clean up.
updates must be atomic.
selectors must be narrow and stable.
store lifetime must be explicit.
SSR/hydration must have a snapshot policy.
persistence must have versioning and readiness.
server data should use server-state cache.
reusable components should avoid hidden global store coupling.