state ownership tidak jelas
source of truth ganda
state dianggap mutable variable, padahal snapshot per render
effect dipakai untuk derivasi, bukan sinkronisasi
identity component berubah tanpa sadar
async result lama mengalahkan async result baru
cache server state tidak selaras dengan mutation
context terlalu luas atau terlalu tersembunyi
external store melanggar snapshot contract
workflow direpresentasikan sebagai boolean soup

1. Apa symptom observable-nya?
2. State mana yang salah?
3. Siapa pemilik state itu?
4. Dari mana state itu dihitung?
5. Event apa yang mengubahnya?
6. Apakah update terjadi di render, event, effect, mutation, atau external subscription?
7. Apakah component remount?
8. Apakah async result stale?
9. Apakah cache/server state sudah invalidated?
10. Bagaimana bug ini dicegah lewat invariant/test/story?

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1); // stale: count berasal dari render pertama
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <div>{count}</div>;
}

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setCount((current) => current + 1);
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <div>{count}</div>;
}

Function ini dibuat pada render ke berapa?
Nilai apa yang ia capture?
Apakah ia dipanggil jauh setelah render itu selesai?
Apakah update berikutnya bergantung pada state terkini?

setInterval / setTimeout
DOM event listener manual
WebSocket callback
Promise callback
mutation callback
memoized callback with wrong dependency
external store subscription
third-party imperative API

function useLatest<T>(value: T) {
  const ref = React.useRef(value);

  React.useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref;
}

function UserEditor({ user }: { user: User }) {
  const [name, setName] = React.useState(user.name);

  React.useEffect(() => {
    setName(user.name);
  }, [user.name]);

  return <input value={name} onChange={(e) => setName(e.target.value)} />;
}

Apakah name adalah draft lokal?
Apakah name harus selalu sinkron dengan prop?
Jika user berubah saat user sedang mengetik, apa yang benar?

function UserNameInput({
  value,
  onChange,
}: {
  value: string;
  onChange: (value: string) => void;
}) {
  return <input value={value} onChange={(event) => onChange(event.target.value)} />;
}

function UserEditor({ user }: { user: User }) {
  return <UserEditorDraft key={user.id} initialName={user.name} />;
}

function UserEditorDraft({ initialName }: { initialName: string }) {
  const [name, setName] = React.useState(initialName);
  return <input value={name} onChange={(e) => setName(e.target.value)} />;
}

type EditorState =
  | { tag: 'clean'; user: User }
  | { tag: 'dirty'; user: User; draft: Draft }
  | { tag: 'saving'; user: User; draft: Draft; requestId: string }
  | { tag: 'failed'; user: User; draft: Draft; error: string };

Apakah ini canonical state atau draft?
Kalau upstream berubah, apakah local state harus reset, merge, atau keep?
Kalau user edit lokal, apakah upstream boleh overwrite?

function Page({ mode }: { mode: 'view' | 'edit' }) {
  const Form = mode === 'view' ? ReadOnlyForm : EditableForm;
  return <Form />;
}

items.map((item, index) => (
  <Row key={index} item={item} />
));

items.map((item) => (
  <Row key={item.id} item={item} />
));

function useMountLogger(name: string) {
  React.useEffect(() => {
    console.log(`${name} mounted`);
    return () => console.log(`${name} unmounted`);
  }, [name]);
}

key berubah?
component type berubah?
conditional branch mengganti posisi?
parent memberi key baru?
list pakai index key?
inline component didefinisikan di dalam render?

function Parent() {
  function Child() {
    const [value, setValue] = React.useState('');
    return <input value={value} onChange={(e) => setValue(e.target.value)} />;
  }

  return <Child />;
}

function Search({ filters }: { filters: Filters }) {
  const [query, setQuery] = React.useState({ filters });

  React.useEffect(() => {
    setQuery({ filters });
  }, [filters, query]); // loop risk
}

Apakah effect ini sebenarnya diperlukan?

function Search({ filters }: { filters: Filters }) {
  const query = React.useMemo(() => buildQuery(filters), [filters]);
  return <Results query={query} />;
}

React.useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => connection.disconnect();
}, [serverUrl, roomId]);

1. Apa yang effect sinkronkan?
2. Apakah effect menulis state React?
3. Apakah state itu dependency effect?
4. Apakah dependency object/function dibuat baru setiap render?
5. Bisakah calculation dipindah ke render?
6. Bisakah event-specific logic dipindah ke event handler?

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = React.useState<User | null>(null);

  React.useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  return <Profile user={user} />;
}

React.useEffect(() => {
  let ignore = false;

  setUser(null);

  fetchUser(userId).then((result) => {
    if (!ignore) {
      setUser(result);
    }
  });

  return () => {
    ignore = true;
  };
}, [userId]);

React.useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/users/${userId}`, { signal: controller.signal })
    .then((r) => r.json())
    .then(setUser)
    .catch((error) => {
      if (error.name !== 'AbortError') {
        setError(error);
      }
    });

  return () => controller.abort();
}, [userId]);

Apakah hasil async punya identity?
Apakah result lama boleh diterima?
Apakah user sudah pindah entity/page?
Apakah command ini idempotent?
Apakah in-flight state disimpan eksplisit?

<input value={maybeUndefined} onChange={...} />

<input value={value ?? ''} onChange={...} />

function useControllableState<T>({
  value,
  defaultValue,
  onChange,
}: {
  value?: T;
  defaultValue: T;
  onChange?: (value: T) => void;
}) {
  const isControlled = value !== undefined;
  const [internal, setInternal] = React.useState(defaultValue);
  const current = isControlled ? value : internal;

  const set = React.useCallback(
    (next: T) => {
      if (!isControlled) setInternal(next);
      onChange?.(next);
    },
    [isControlled, onChange]
  );

  return [current, set] as const;
}

Apakah value selalu didefinisikan dalam controlled mode?
Apakah defaultValue hanya dipakai saat mount?
Apakah parent benar-benar mengubah value setelah onChange?
Apakah child diam-diam menyimpan mirror dari prop?

Mengubah satu field kecil membuat seluruh halaman rerender.

<AuthContext.Provider value={{ user, permissions, updateProfile, logout }}>
  {children}
</AuthContext.Provider>

const value = React.useMemo(
  () => ({ user, permissions, updateProfile, logout }),
  [user, permissions, updateProfile, logout]
);

split read context and command context
split high-volatility and low-volatility context
move high-frequency state to external store selector
move server state to query cache
move local-only state down

Provider mana yang berubah?
Value identity berubah karena apa?
Consumer mana yang membaca context terlalu luas?
Apakah context membawa capability atau volatile state?
Apakah provider terlalu tinggi?

function useRenderCount(label: string) {
  const count = React.useRef(0);
  count.current += 1;
  console.log(`${label} render`, count.current);
}

Mutation berhasil, tapi list tidak berubah.
Detail berubah, tapi badge count lama.
Optimistic row muncul dua kali.
Pagination kacau setelah delete.

Apakah query key list/detail konsisten?
Apakah mutation invalidates key yang benar?
Apakah direct cache write preserve shape?
Apakah optimistic temp ID diganti canonical ID?
Apakah aggregate query ikut invalidated?
Apakah staleTime membuat refetch tidak terjadi sesuai harapan?
Apakah tenant/filter/sort/search params masuk query key?

['cases']

['tenant', tenantId, 'cases', { status, assigneeId, sort, page }]

const caseMutationImpact = {
  approveCase: (caseId: string) => [
    ['case', caseId],
    ['cases'],
    ['case-counts'],
    ['dashboard'],
  ],
};

1. Inspect query keys.
2. Inspect query data before mutation.
3. Inspect optimistic write.
4. Inspect rollback path.
5. Inspect invalidation path.
6. Inspect refetch result.
7. Inspect UI selector/view model.

function getSnapshot() {
  return { ...store.state }; // object baru setiap call
}

let currentSnapshot = store.state;

function setState(next: State) {
  currentSnapshot = next;
  listeners.forEach((listener) => listener());
}

function getSnapshot() {
  return currentSnapshot;
}

subscribe mengembalikan cleanup?
getSnapshot stable?
state immutable atau snapshot cached?
server snapshot sama dengan initial client snapshot?
selector mengalokasikan object baru?
equality function benar?
listener leak terjadi?

const [isOpen, setOpen] = useState(false);
const [isSubmitting, setSubmitting] = useState(false);
const [isSuccess, setSuccess] = useState(false);
const [error, setError] = useState<string | null>(null);

isSubmitting=true + isSuccess=true
isOpen=false + error visible
isSuccess=true + error != null

type ApprovalState =
  | { tag: 'closed' }
  | { tag: 'editing'; reason: string }
  | { tag: 'confirming'; reason: string }
  | { tag: 'submitting'; reason: string; requestId: string }
  | { tag: 'failed'; reason: string; error: string }
  | { tag: 'submitted'; confirmationId: string };

Apa semua state valid bisa disebutkan?
Apa event yang boleh terjadi dari setiap state?
Apa transition ilegal yang sekarang mungkin terjadi?
Apa side effect yang harus pindah ke command/effect boundary?
Apa request identity yang dibutuhkan?

Apakah effect cleanup benar?
Apakah subscription unsubscribe?
Apakah command dikirim dari render/effect yang tidak seharusnya?
Apakah network request seharusnya deduped/cached?
Apakah third-party init idempotent?

function Component() {
  analytics.track('viewed'); // side effect during render
  return <div />;
}

function Component() {
  React.useEffect(() => {
    analytics.track('viewed');
  }, []);

  return <div />;
}

function SaveButton() {
  function handleClick() {
    analytics.track('save_clicked');
    save();
  }

  return <button onClick={handleClick}>Save</button>;
}

Invariant: A closed case cannot show an enabled approve command.
Bug: Confirm button remains enabled after case status changes to closed.

function canApprove(caseVm: CaseViewModel, actor: Actor): Decision {
  if (caseVm.status === 'closed') {
    return { allowed: false, reason: 'Case is already closed.' };
  }

  if (!actor.permissions.includes('case.approve')) {
    return { allowed: false, reason: 'Missing approval permission.' };
  }

  return { allowed: true };
}

it('forbids approving a closed case', () => {
  expect(canApprove(buildCase({ status: 'closed' }), supervisor)).toEqual({
    allowed: false,
    reason: 'Case is already closed.',
  });
});

render(<ApprovalPanel case={buildCase({ status: 'closed' })} actor={supervisor} />);
expect(screen.getByRole('button', { name: /approve/i })).toBeDisabled();
expect(screen.getByText(/already closed/i)).toBeVisible();

export const ClosedCaseCannotApprove: Story = {
  args: {
    case: buildCase({ status: 'closed' }),
    actor: supervisor,
  },
};

function withTransitionLogging<S, E extends { type: string }>(
  reducer: (state: S, event: E) => S,
  label: string
) {
  return (state: S, event: E) => {
    const next = reducer(state, event);

    console.groupCollapsed(`[${label}] ${event.type}`);
    console.log('prev', state);
    console.log('event', event);
    console.log('next', next);
    console.groupEnd();

    return next;
  };
}

workflow_started
command_submitted
command_succeeded
command_failed
optimistic_applied
optimistic_rolled_back
permission_denied
stale_result_ignored

unit test for pure transition/invariant
component test for observable behavior
Storybook regression story for visual state
query/store test for cache behavior
workflow test for state machine transition

User membuka modal approve.
Di tab lain, case ditutup.
Current tab masih bisa submit approval.

server-state drift + permission/precondition drift + workflow stale snapshot

Apakah modal menyimpan case status lama?
Apakah query invalidated saat case berubah?
Apakah submit API melakukan final precondition check?
Apakah UI command membaca latest case status?
Apakah failed precondition ditampilkan sebagai recoverable error?

1. Backend rejects approve if case closed.
2. Mutation handles 409/412 as precondition failed.
3. Query invalidates case detail/list/counts.
4. UI disables confirm if latest case status closed.
5. Workflow transitions from confirming → failed_precondition.
6. Regression story: closed while confirming.
7. Component test: confirm disabled for closed case.

type ApprovalState =
  | { tag: 'closed' }
  | { tag: 'confirming'; caseVersion: number; reason: string }
  | { tag: 'submitting'; caseVersion: number; reason: string; requestId: string }
  | { tag: 'failedPrecondition'; reason: string; message: string }
  | { tag: 'submitted'; approvalId: string };

Symptom:
  Confirm button remains enabled for closed cases.

Broken invariant:
  Closed case cannot expose approve command.

Root cause:
  Modal workflow copied case status into local state at open time and never revalidated against latest query data.

Fix:
  ApprovalPanel now derives command decision from latest case view model.
  Submit mutation handles precondition failure and invalidates case detail/list/counts.
  Workflow adds failedPrecondition state.

Regression:
  Added ClosedCaseCannotApprove story.
  Added reducer transition test for CASE_CLOSED while confirming.
  Added component test for disabled confirm button.

Fixed disabled issue.

1. Symptom
2. Broken invariant
3. State owner
4. Source of truth
5. Event/command path
6. Render snapshot involved
7. Effect/async/cache involved
8. Identity/key involved
9. Actual root cause
10. Regression artifact
11. Refactor needed to make bug impossible

Storybook regression story
Reducer transition test
Component interaction test
Query/mutation cache test
Workflow state-machine test