state punya lebih dari satu owner,
callback membawa makna yang ambigu,
effect dipakai untuk sinkronisasi internal,
context menyembunyikan dependency,
store menjadi global dumping ground,
event bus dipakai untuk state,
async response datang ke snapshot yang sudah basi,
key/remount menghapus state tanpa sengaja.

Gejalanya apa?
Edge komunikasi mana yang salah?
Owner state-nya siapa?
Invariant apa yang dilanggar?
Refactor minimum apa?
Refactor arsitektural apa?

Satu owner untuk satu state canonical.
Reader tidak mengubah state langsung.
Child mengirim intent, bukan memutasi parent.
Cross-tree dependency punya boundary eksplisit.
Async command punya lifecycle.
Derived state tidak disimpan kecuali ada alasan kuat.

UI menampilkan satu nilai, submit mengirim nilai lain.
Reset hanya mereset sebagian UI.
Parent mengira item selected, child mengira tidak selected.
Form dan cache server berbeda tanpa policy.

function Parent() {
  const [selectedId, setSelectedId] = useState<string | null>(null);

  return (
    <UserList
      selectedId={selectedId}
      onSelectedIdChange={setSelectedId}
    />
  );
}

function UserList({ selectedId, onSelectedIdChange }: Props) {
  const [localSelectedId, setLocalSelectedId] = useState(selectedId);

  function select(id: string) {
    setLocalSelectedId(id);
    onSelectedIdChange(id);
  }

  // render using localSelectedId
}

Controlled dan uncontrolled model dicampur tanpa commit contract.

function UserList({ selectedId, onSelectedIdChange }: Props) {
  return users.map((user) => (
    <button
      key={user.id}
      aria-pressed={selectedId === user.id}
      onClick={() => onSelectedIdChange(user.id)}
    >
      {user.name}
    </button>
  ));
}

function UserList({ defaultSelectedId, onCommitSelection }: Props) {
  const [selectedId, setSelectedId] = useState(defaultSelectedId);

  function commit() {
    onCommitSelection(selectedId);
  }
}

Jika parent mengirim value dan onChange, child controlled.
Jika parent mengirim defaultValue, child boleh punya local owner.
Jangan sync props ke state kecuali ada explicit draft/commit semantics.

Child bisa mengubah parent state dalam bentuk apa pun.
Invariant parent tersebar di banyak child.
State update sulit dilacak.

<InvoiceEditor setInvoice={setInvoice} />

setInvoice((invoice) => ({
  ...invoice,
  status: 'PAID',
  total: -999,
}));

<InvoiceEditor
  invoice={invoice}
  onLineItemAdded={addLineItem}
  onDiscountChanged={changeDiscount}
  onInvoiceSubmitted={submitInvoice}
/>

function changeDiscount(nextDiscount: Discount) {
  dispatch({
    type: 'DISCOUNT_CHANGED',
    discount: nextDiscount,
  });
}

Setter adalah implementation detail owner.
Callback publik harus mewakili intent/domain event.

onChange dipanggil saat typing, blur, reset, atau server update?
Parent bingung apakah event sudah committed.
Analytics double count.
Validation berjalan terlalu sering.

<SearchBox onChange={handleSearchChange} />

input changed,
query committed,
search submitted,
filter applied,
debounced value changed.

<SearchBox
  value={draftQuery}
  onDraftQueryChange={setDraftQuery}
  onSearchCommitted={executeSearch}
/>

<AmountField
  value={draftAmount}
  onDraftValueChange={setDraftAmount}
  onValueCommitted={commitAmount}
  onValidationRequested={validateAmount}
/>

Callback name harus menjawab: event ini terjadi kapan dan maknanya apa?

Handler membaca state lama.
Async callback submit mengirim value lama.
Timeout memakai prop lama.
Subscription listener tidak update.

function AutoSave({ documentId, content }: Props) {
  useEffect(() => {
    const id = setInterval(() => {
      saveDocument(documentId, content);
    }, 5000);

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

useEffect(() => {
  const id = setInterval(() => {
    saveDocument(documentId, content);
  }, 5000);

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

function AutoSave({ documentId, content }: Props) {
  const latest = useRef({ documentId, content });

  useEffect(() => {
    latest.current = { documentId, content };
  }, [documentId, content]);

  useEffect(() => {
    const id = setInterval(() => {
      saveDocument(latest.current.documentId, latest.current.content);
    }, 5000);

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

Jika callback membaca reactive value, dependency harus benar.
Jika subscription harus stabil tetapi membaca value terbaru, gunakan latest-ref pattern dengan sadar.

State update berantai.
Render ganda tidak perlu.
Sulit tahu urutan update.
Strict Mode memperlihatkan bug.

const [items, setItems] = useState<Item[]>([]);
const [total, setTotal] = useState(0);

useEffect(() => {
  setTotal(items.reduce((sum, item) => sum + item.price, 0));
}, [items]);

const total = items.reduce((sum, item) => sum + item.price, 0);

const total = useMemo(
  () => items.reduce((sum, item) => sum + item.price, 0),
  [items],
);

Effect untuk sinkronisasi external system.
Derived internal data dihitung saat render.
Event-specific logic berada di event handler.

Sibling A update sibling B lewat imperative ref.
Sibling saling subscribe event bus.
Parent hanya menjadi tempat lewat callback berantai tanpa model.

function Page() {
  const tableRef = useRef<TableHandle>(null);

  return (
    <>
      <FilterPanel onFilterChanged={(filter) => tableRef.current?.reload(filter)} />
      <DataTable ref={tableRef} />
    </>
  );
}

function Page() {
  const [filter, setFilter] = useState(defaultFilter);

  return (
    <>
      <FilterPanel filter={filter} onFilterChange={setFilter} />
      <DataTable filter={filter} />
    </>
  );
}

function Page() {
  const [filter, setFilter] = useUrlFilter();
  const query = useCasesQuery(filter);

  return (
    <>
      <FilterPanel filter={filter} onFilterChange={setFilter} />
      <DataTable data={query.data} isLoading={query.isLoading} />
    </>
  );
}

Jika sibling harus konsisten, cari owner bersama.
Jika state harus shareable/bookmarkable, pertimbangkan URL.
Jika state adalah server data, pakai cache/query boundary.

Page root punya ratusan state.
Setiap keypress membuat seluruh page re-render.
Komponen kecil tidak reusable karena tergantung page owner.
State lokal yang sederhana menjadi global dalam satu screen.

function DashboardPage() {
  const [isTooltipOpen, setTooltipOpen] = useState(false);
  const [hoveredRowId, setHoveredRowId] = useState<string | null>(null);
  const [draftNote, setDraftNote] = useState('');
  const [localPopoverAnchor, setLocalPopoverAnchor] = useState<HTMLElement | null>(null);

  // everything lives here
}

Tooltip open state -> Tooltip owner
Popover anchor     -> Popover owner
Draft note         -> Note editor owner, commit upward on save
Hovered row        -> Table/row owner kecuali dipakai global

Lift state only when there is a shared consistency requirement.

Dua component terlihat harus sinkron tapi tidak sinkron.
Duplicated filters.
Submit button tidak tahu validitas field.
Summary panel menampilkan data lama.

function FilterPanel() {
  const [filter, setFilter] = useState(defaultFilter);
}

function ResultsTable() {
  const [filter, setFilter] = useState(defaultFilter);
}

function SearchPage() {
  const [filter, setFilter] = useState(defaultFilter);

  return (
    <>
      <FilterPanel filter={filter} onFilterChange={setFilter} />
      <ResultsTable filter={filter} />
    </>
  );
}

Jika dua component harus berubah bersama, state perlu owner bersama.

Component sulit dipakai di test/story karena butuh provider tidak terlihat.
Component gagal saat dipindah subtree.
Dependency bisnis tidak tampak dari props.

function DeleteButton({ caseId }: Props) {
  const permissions = usePermissions();
  const toast = useToast();
  const audit = useAudit();
  const modal = useModal();

  // lots of hidden dependencies
}

function CaseActionBar({ caseId }: Props) {
  const permissions = usePermissions();
  const toast = useToast();
  const audit = useAudit();
  const modal = useModal();

  return (
    <DeleteButton
      disabled={!permissions.canDeleteCase(caseId)}
      onDeleteRequested={() => confirmAndDelete({ caseId, modal, toast, audit })}
    />
  );
}

Context baik untuk capability passing.
Jangan biarkan context menyembunyikan domain orchestration yang seharusnya explicit.

Typing di satu field membuat seluruh subtree rerender.
Mouse position dalam context membuat app lambat.
Selection state besar membuat semua consumer update.

<FormContext.Provider value={{ values, errors, setValue }}>
  {children}
</FormContext.Provider>

1. Split read/write context.
2. Split provider per scope.
3. Memoize value jika identity noise.
4. Pecah component agar hanya child tertentu membaca context.
5. Gunakan external store + selector subscription untuk high-frequency shared state.

Context cocok untuk low/medium frequency dependency.
Untuk high-frequency granular state, gunakan subscription model.

Tidak jelas siapa owner state.
Event order menentukan correctness.
Subscriber lama tidak cleanup.
Bug hanya muncul saat screen tertentu pernah dibuka.

bus.emit('user:selected', userId);
bus.emit('drawer:open');
bus.emit('table:reload');
bus.emit('breadcrumb:update');

toast,
analytics,
telemetry,
microfrontend bridge,
external system integration,
rare command fan-out dengan lifecycle aman.

Response request lama menimpa request baru.
Loading state salah.
Component unmounted masih menerima update.
Search result tidak sesuai query terakhir.

useEffect(() => {
  setLoading(true);

  fetchUsers(query).then((users) => {
    setUsers(users);
    setLoading(false);
  });
}, [query]);

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

  setLoading(true);

  fetchUsers(query).then((users) => {
    if (ignore) return;
    setUsers(users);
    setLoading(false);
  });

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

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

  setLoading(true);

  fetchUsers(query, { signal: controller.signal })
    .then((users) => {
      setUsers(users);
      setLoading(false);
    })
    .catch((error) => {
      if (error.name === 'AbortError') return;
      setLoading(false);
      setError(error);
    });

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

Render membaca data sekaligus menjalankan mutation.
Component view melakukan navigation, audit, mutation, toast, dan cache update sendiri.
Testing sulit karena read dan write bercampur.

function ApproveButton({ caseId }: Props) {
  const caseDetail = useCaseDetail(caseId);

  async function click() {
    await approveCase(caseDetail.data);
    await audit('case approved');
    toast.success('Approved');
    navigate('/cases');
  }
}

function CaseApprovalBoundary({ caseId }: Props) {
  const caseDetail = useCaseDetail(caseId);
  const approve = useApproveCaseCommand();

  return (
    <ApproveButton
      disabled={!caseDetail.data.canApprove}
      onApproveRequested={() => approve.execute({ caseId })}
    />
  );
}

function useApproveCaseCommand() {
  const toast = useToast();
  const audit = useAudit();
  const navigate = useNavigate();

  return {
    async execute(command: { caseId: string }) {
      await approveCase(command.caseId);
      await audit.caseApproved(command.caseId);
      toast.success('Case approved.');
      navigate('/cases');
    },
  };
}

Render path = query/read.
Event path = command/write.
Effect path = external synchronization.

Modal close tanpa memberi reason.
Nested modal menutup parent.
Focus tidak kembali.
Backdrop click dianggap cancel walau submit pending.
Route change meninggalkan overlay orphaned.

<Modal open={open} onClose={() => setOpen(false)} />

type CloseReason =
  | 'escape'
  | 'backdrop'
  | 'cancel-button'
  | 'confirm-success'
  | 'route-change';

<Modal
  open={open}
  onOpenChange={(nextOpen, reason) => {
    if (isSubmitting && reason !== 'confirm-success') return;
    setOpen(nextOpen);
  }}
/>

Overlay communication harus membawa close reason, focus policy, dan async guard.

Input kehilangan focus.
Form reset saat parent render.
Component state hilang saat list reorder.
Animation restart.

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

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

<CaseEditForm key={caseId} caseId={caseId} />

Key adalah identity contract.
Jangan gunakan key acak atau index untuk item reorderable.
Gunakan key untuk reset hanya jika reset memang policy yang diinginkan.

Component punya 40 props boolean.
Kombinasi props menghasilkan state ilegal.
Internal component penuh if/else.
Consumer sulit tahu kombinasi valid.

<DataPanel
  showHeader
  showFooter
  dense
  selectable
  multiSelect
  remote
  paginated
  virtualized
  editable
  editableInline
  editableModal
  exportable
/>

<DataPanel>
  <DataPanel.Header />
  <DataPanel.Toolbar>
    <ExportButton />
  </DataPanel.Toolbar>
  <SelectableDataTable selectionMode="multiple" />
  <DataPanel.Footer>
    <Pagination />
  </DataPanel.Footer>
</DataPanel>

type EditMode =
  | { kind: 'readonly' }
  | { kind: 'inline-edit'; onRowSave: (row: Row) => void }
  | { kind: 'modal-edit'; onEditRequested: (row: Row) => void };

Jika props mulai menjadi bahasa konfigurasi, component mungkin mengandung terlalu banyak responsibility.

Component hanya bekerja jika children dalam urutan tertentu.
Wrapper kecil merusak behavior.
Type checking sulit.
Nested children tidak terbaca.

function Tabs({ children }: Props) {
  return Children.map(children, (child, index) => {
    return cloneElement(child, { index });
  });
}

Fragment/wrapper bisa mengubah asumsi.
Child non-element perlu ditangani.
cloneElement bisa override props consumer.
Nested composition rapuh.

<Tabs.Root defaultValue="profile">
  <Tabs.List>
    <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
    <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="profile">...</Tabs.Content>
  <Tabs.Content value="billing">...</Tabs.Content>
</Tabs.Root>

Jika perlu koordinasi compound component, context biasanya lebih stabil daripada introspeksi children yang agresif.

Maximum update depth exceeded.
Effect A memicu Effect B, lalu balik lagi.
UI flicker antara dua state.

useEffect(() => {
  setSelectedId(items[0]?.id ?? null);
}, [items]);

useEffect(() => {
  setItems(filterItems(allItems, selectedId));
}, [selectedId, allItems]);

allItems + filter = visibleItems
selectedId valid jika ada di visibleItems

const visibleItems = useMemo(
  () => filterItems(allItems, filter),
  [allItems, filter],
);

const selectedItem = visibleItems.find((item) => item.id === selectedId) ?? null;

function changeFilter(nextFilter: Filter) {
  dispatch({ type: 'FILTER_CHANGED', filter: nextFilter });
}

1. Tuliskan state yang salah.
2. Tentukan apakah state itu canonical, derived, draft, meta, cache, atau command lifecycle.
3. Cari owner saat ini.
4. Cari owner yang seharusnya.
5. Gambar edge komunikasi.
6. Tandai edge yang imperative/tersembunyi.
7. Cari duplicated owner.
8. Cari effect internal yang bisa dihapus.
9. Cari async edge tanpa cancellation/lifecycle.
10. Pilih refactor minimum.

Symptom:
  Submit mengirim filter lama.

State involved:
  draftFilter, committedFilter, queryKey.

Current owner:
  FilterPanel owns draftFilter.
  Page owns committedFilter.
  Table derives queryKey from committedFilter.

Broken edge:
  FilterPanel calls onChange on every keypress, but Page treats it as committed filter.

Invariant violated:
  Query should run only after user applies filter.

Fix:
  Rename callback to onDraftFilterChange and add onFilterCommitted.

1. Component composition / slots.
2. Move logic to nearer owner.
3. Custom hook at boundary.
4. Scoped context.
5. External store jika banyak distant readers/writers.

1. Split by volatility.
2. Split by domain capability.
3. Split read/write.
4. Move high-frequency state out.
5. Replace with selector store.

1. Apakah intermediate component hanya forwarding? Gunakan composition slot.
2. Apakah event domain-level? Naikkan boundary command.
3. Apakah distant subtree butuh capability? Scoped context.
4. Apakah banyak independent sender? Command bus/capability provider, bukan state event bus.

1. Pisahkan payload/meta/error/submit state.
2. Tentukan controlled vs uncontrolled policy.
3. Jadikan cross-field behavior sebagai reducer transition.
4. Map server errors dengan lifetime jelas.
5. Tambahkan field registry untuk dynamic fields.

1. Tambahkan request id atau abort.
2. Pisahkan draft vs committed input.
3. Gunakan query cache untuk server data.
4. Jangan simpan duplicated server data dalam component state.

[ ] Apakah ini data read, user intent, command, domain event, atau external signal?
[ ] Siapa owner state canonical?
[ ] Apakah state ini derived? Jika iya, kenapa disimpan?
[ ] Apakah callback name menjelaskan timing dan makna?
[ ] Apakah child menerima setter mentah?
[ ] Apakah context menyembunyikan dependency penting?
[ ] Apakah update high-frequency lewat context?
[ ] Apakah async edge punya cancellation/race handling?
[ ] Apakah key/remount policy sengaja?
[ ] Apakah route/URL lebih tepat sebagai owner?
[ ] Apakah server cache lebih tepat sebagai owner?
[ ] Apakah imperative ref benar-benar escape hatch, bukan komunikasi utama?

search/filter page,
large edit form,
table with selection,
modal-driven workflow,
approval action bar,
notification center.

Components:
State:
Owner:
Readers:
Writers:
Callbacks:
Context:
Effects:
External systems:
Async commands:

duplicated owner,
raw setter leakage,
ambiguous callback,
derived state stored,
internal sync effect,
high-frequency context,
event bus misuse,
async race,
accidental remount.

Ownership tidak jelas.
Timing tidak eksplisit.
Identity tidak stabil.
Dependency tersembunyi.
Async lifecycle tidak dimodelkan.

props,
state,
callbacks,
context,
refs,
effects,
keys,
external store subscription.

Ini state atau event?
Ini read atau command?
Ini local, shared, URL, server, external, atau workflow state?
Siapa owner-nya?
Siapa boleh mengubahnya?
Apa invariant-nya?
Apa failure mode-nya?