Apa yang component ini tahu?
Apa yang component ini miliki?
Apa yang component ini boleh ubah?
Apa yang component ini janjikan kepada parent?
Apa yang parent tidak perlu tahu?

function InvoicePage() {
  const [lineItems, setLineItems] = useState<LineItem[]>([]);
  const [selectedLineItemId, setSelectedLineItemId] = useState<string | null>(null);
  const [lineItemDraftName, setLineItemDraftName] = useState('');
  const [lineItemDraftAmount, setLineItemDraftAmount] = useState('');
  const [lineItemError, setLineItemError] = useState<string | null>(null);

  return (
    <LineItemEditor
      items={lineItems}
      selectedId={selectedLineItemId}
      draftName={lineItemDraftName}
      draftAmount={lineItemDraftAmount}
      error={lineItemError}
      onSelect={setSelectedLineItemId}
      onDraftNameChange={setLineItemDraftName}
      onDraftAmountChange={setLineItemDraftAmount}
      onErrorChange={setLineItemError}
      onItemsChange={setLineItems}
    />
  );
}

function InvoicePage() {
  const [lineItems, setLineItems] = useState<LineItem[]>([]);

  return (
    <LineItemEditor
      value={lineItems}
      onChange={setLineItems}
    />
  );
}

function InvoicePage() {
  return <InvoiceLineItemSection invoiceId={invoiceId} />;
}

const [selectedInvoiceIds, setSelectedInvoiceIds] = useState<string[]>([]);

Siapa membuat selectedInvoiceIds? Table? Page? BulkActionToolbar?
Siapa boleh menambah/menghapus item? Row? Header checkbox? Keyboard shortcut?
Siapa menjamin selected ids masih valid setelah filter berubah?
Siapa reset selection setelah bulk approve?
Apakah selection masuk URL, local storage, server, atau hanya ephemeral?

Letakkan state sedekat mungkin dengan tempat state itu digunakan.
Naikkan state hanya ketika ada alasan nyata.

function ExpandableDescription({ text }: { text: string }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <section>
      <p>{expanded ? text : `${text.slice(0, 120)}...`}</p>
      <button onClick={() => setExpanded(value => !value)}>
        {expanded ? 'Show less' : 'Show more'}
      </button>
    </section>
  );
}

function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(v => !v)}>{String(on)}</button>;
}

function PreferencesPanel() {
  const [density, setDensity] = useState<'compact' | 'comfortable'>('comfortable');

  return (
    <>
      <DensitySelector value={density} onChange={setDensity} />
      <Preview density={density} />
    </>
  );
}

function TextField({ value, onChange }: Props) {
  return <input value={value} onChange={event => onChange(event.target.value)} />;
}

function TextField({ defaultValue }: { defaultValue?: string }) {
  const [value, setValue] = useState(defaultValue ?? '');
  return <input value={value} onChange={event => setValue(event.target.value)} />;
}

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

  return ...;
}

Apakah name/email adalah draft yang sengaja boleh berbeda dari user asli?
Atau developer hanya menyalin props karena input butuh state?

type UserDraft = {
  name: string;
  email: string;
};

function createDraft(user: User): UserDraft {
  return {
    name: user.name,
    email: user.email,
  };
}

function UserEditor({ user, onSubmit }: Props) {
  const [draft, setDraft] = useState(() => createDraft(user));

  function resetDraft() {
    setDraft(createDraft(user));
  }

  return ...;
}

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

function InvoicePageRoute() {
  const invoiceId = useInvoiceIdFromRoute();
  const permissions = useInvoicePermissions(invoiceId);

  return (
    <InvoiceDataBoundary invoiceId={invoiceId}>
      <InvoicePage permissions={permissions} />
    </InvoiceDataBoundary>
  );
}

function InvoiceApprovalSection({ invoiceId }: { invoiceId: string }) {
  const workflow = useInvoiceApprovalWorkflow(invoiceId);

  return (
    <section>
      <ApprovalSummary state={workflow.state} />
      <ApprovalActions commands={workflow.commands} />
    </section>
  );
}

function InlineAmountEditor({ value, onCommit }: Props) {
  const [draft, setDraft] = useState(String(value));
  const [editing, setEditing] = useState(false);

  return ...;
}

function StatusBadge({ status }: { status: InvoiceStatus }) {
  return <span data-status={status}>{status}</span>;
}

<InvoiceApprovalButtons
  invoice={invoice}
  user={user}
  permissions={permissions}
  onSetPendingAction={setPendingAction}
  onOpenModal={setModalOpen}
  onSetComment={setComment}
  onSubmit={submitApproval}
/>

<InvoiceApprovalActions
  availableActions={availableActions}
  pendingAction={pendingAction}
  onActionRequested={requestAction}
/>

<InvoiceApprovalActions
  state={approvalState}
  commands={approvalCommands}
/>

type ApprovalCommands = {
  requestApprove(): void;
  requestReject(): void;
  cancelPendingAction(): void;
  confirmPendingAction(comment: string): Promise<void>;
};

function Parent() {
  const [filters, setFilters] = useState({ query: '', page: 1 });

  return <SearchBox setFilters={setFilters} />;
}

function Parent() {
  const [filters, setFilters] = useState({ query: '', page: 1 });

  function handleQueryChanged(query: string) {
    setFilters(current => ({
      ...current,
      query,
      page: 1,
    }));
  }

  return <SearchBox value={filters.query} onQueryChanged={handleQueryChanged} />;
}

type Invoice = {
  id: string;
  status: 'draft' | 'submitted' | 'approved' | 'rejected';
};

const [status, setStatus] = useState(invoice.status);

function useOptimisticInvoiceStatus(invoice: Invoice) {
  const [optimisticStatus, setOptimisticStatus] = useState<Invoice['status'] | null>(null);

  return {
    visibleStatus: optimisticStatus ?? invoice.status,
    setOptimisticStatus,
    clearOptimisticStatus: () => setOptimisticStatus(null),
  };
}

server truth     = invoice.status
optimistic layer = optimisticStatus
visible value    = optimisticStatus ?? invoice.status

selectedIds harus subset dari visible row ids jika selection hanya berlaku untuk halaman saat ini.

function InvoiceSearchPage() {
  const [filters, setFilters] = useState(defaultFilters);
  const rows = useInvoiceRows(filters);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);

  function handleFiltersChanged(next: Filters) {
    setFilters(next);
    setSelectedIds([]);
  }

  return (
    <InvoiceTable
      rows={rows}
      selectedIds={selectedIds}
      onSelectionChanged={setSelectedIds}
    />
  );
}

function InvoiceSearchSection() {
  const model = useInvoiceSearchModel();

  return (
    <>
      <InvoiceFilters value={model.filters} onChange={model.changeFilters} />
      <InvoiceTable
        rows={model.rows}
        selectedIds={model.selectedIds}
        onSelectionChanged={model.changeSelection}
      />
    </>
  );
}

State yang harus menjaga invariant bersama sebaiknya dimiliki oleh boundary yang sama.

type ToggleProps = {
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
};

function Toggle({ checked, defaultChecked = false, onCheckedChange }: ToggleProps) {
  const isControlled = checked !== undefined;
  const [internalChecked, setInternalChecked] = useState(defaultChecked);

  const currentChecked = isControlled ? checked : internalChecked;

  function update(next: boolean) {
    if (!isControlled) {
      setInternalChecked(next);
    }

    onCheckedChange?.(next);
  }

  return (
    <button
      aria-pressed={currentChecked}
      onClick={() => update(!currentChecked)}
    >
      {currentChecked ? 'On' : 'Off'}
    </button>
  );
}

Parent punya 10 useState hanya untuk membuat satu child bekerja.

<App setFilters={setFilters}>
  <Layout setFilters={setFilters}>
    <Sidebar setFilters={setFilters}>
      <SearchBox setFilters={setFilters} />
    </Sidebar>
  </Layout>
</App>

const AppContext = createContext({
  user: null,
  theme: 'light',
  filters: {},
  selectedIds: [],
  modal: null,
  setUser() {},
  setTheme() {},
  setFilters() {},
  setSelectedIds() {},
  setModal() {},
});

<Form
  nameDraft={nameDraft}
  setNameDraft={setNameDraft}
  emailDraft={emailDraft}
  setEmailDraft={setEmailDraft}
  touched={touched}
  setTouched={setTouched}
  validationErrors={errors}
  setValidationErrors={setErrors}
/>

function UserEditor({ user }: { user: User }) {
  const [draft, setDraft] = useState(() => createDraft(user));
  // what happens when user.id changes?
}

function InvoicePage() {
  const [comment, setComment] = useState('');
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [pendingAction, setPendingAction] = useState<ApprovalAction | null>(null);
  const [submitError, setSubmitError] = useState<string | null>(null);

  return ...;
}

Approval workflow:
- comment
- confirmOpen
- pendingAction
- submitError

type ApprovalState = {
  comment: string;
  confirmOpen: boolean;
  pendingAction: ApprovalAction | null;
  submitError: string | null;
};

function useApprovalWorkflow(invoiceId: string) {
  const [state, setState] = useState<ApprovalState>({
    comment: '',
    confirmOpen: false,
    pendingAction: null,
    submitError: null,
  });

  function requestAction(action: ApprovalAction) {
    setState(current => ({
      ...current,
      pendingAction: action,
      confirmOpen: true,
      submitError: null,
    }));
  }

  function cancelAction() {
    setState(current => ({
      ...current,
      pendingAction: null,
      confirmOpen: false,
      submitError: null,
    }));
  }

  function changeComment(comment: string) {
    setState(current => ({ ...current, comment }));
  }

  return {
    state,
    commands: {
      requestAction,
      cancelAction,
      changeComment,
    },
  };
}

function InvoiceApprovalSection({ invoiceId }: { invoiceId: string }) {
  const approval = useApprovalWorkflow(invoiceId);

  return (
    <>
      <ApprovalActionBar
        pendingAction={approval.state.pendingAction}
        onActionRequested={approval.commands.requestAction}
      />
      <ApprovalCommentBox
        value={approval.state.comment}
        onChange={approval.commands.changeComment}
      />
      <ApprovalConfirmDialog
        open={approval.state.confirmOpen}
        action={approval.state.pendingAction}
        onCancel={approval.commands.cancelAction}
      />
    </>
  );
}

1. Apakah nilai bisa dihitung dari props/state/context yang sudah ada?
   Ya -> derived value, jangan state.

2. Apakah nilai hanya dipakai satu component kecil?
   Ya -> local state.

3. Apakah beberapa sibling membutuhkan nilai yang sama?
   Ya -> lift ke ancestor terdekat yang masuk akal.

4. Apakah nilai harus dibaca cross-tree tanpa prop drilling?
   Ya -> context atau external store, tergantung volatility dan granularitas.

5. Apakah nilai berasal dari server dan butuh freshness/invalidation?
   Ya -> server-state cache/query layer.

6. Apakah nilai merepresentasikan URL/shareable navigation?
   Ya -> URL/route state.

7. Apakah nilai merepresentasikan multi-step process dengan invariant transisi?
   Ya -> reducer/state machine/workflow boundary.

8. Apakah nilai perlu survive reload/session?
   Ya -> persistence layer dengan hydration semantics jelas.

if (user.role === 'admin') {
  return <ApproveButton />;
}

function ApprovalGate({ invoiceId, children }: PropsWithChildren<{ invoiceId: string }>) {
  const capability = useInvoiceCapability(invoiceId);

  if (!capability.canApprove) {
    return null;
  }

  return children;
}

<ApproveButton
  disabled={!capability.canApprove}
  disabledReason={capability.reason}
/>

UI boleh menampilkan permission result, tetapi policy source of truth harus berada di authorization/domain layer.

it('toggles expanded state locally', async () => {
  render(<ExpandableDescription text="long text..." />);

  await user.click(screen.getByRole('button', { name: /show more/i }));

  expect(screen.getByText(/long text/i)).toBeVisible();
});

it('reports value changes to parent', async () => {
  const onChange = vi.fn();

  render(<TextField value="" onChange={onChange} />);

  await user.type(screen.getByRole('textbox'), 'abc');

  expect(onChange).toHaveBeenCalled();
});

it('resets selection when query changes', () => {
  const state = reducer(
    {
      query: 'old',
      page: 3,
      selectedIds: ['inv-1'],
    },
    { type: 'queryChanged', query: 'new' },
  );

  expect(state).toEqual({
    query: 'new',
    page: 1,
    selectedIds: [],
  });
});

[ ] State punya owner yang jelas.
[ ] Parent tidak menyimpan detail internal child tanpa alasan.
[ ] Child tidak menyalin props ke state tanpa reset semantics jelas.
[ ] Callback merepresentasikan intent, bukan setter bocor.
[ ] State yang menjaga invariant bersama berada dalam boundary yang sama.
[ ] Derived value tidak disimpan sebagai state.
[ ] Controlled/uncontrolled mode jelas dan tidak berubah diam-diam.
[ ] Context tidak menjadi dumping ground untuk unrelated state.
[ ] State server tidak difork menjadi client state tanpa optimistic model eksplisit.
[ ] Reset behavior sengaja: key, command reset, atau transition reducer.

- search input draft
- committed search query
- current page
- selected row ids
- invoice detail data
- approve modal open state
- approve comment draft
- mutation pending state
- user permission to approve
- table column visibility preference

state | owner | reset trigger | storage | reason

function App() {
  const [filters, setFilters] = useState(defaultFilters);

  return <Layout filters={filters} setFilters={setFilters} />;
}

function Layout({ filters, setFilters }: Props) {
  return <Sidebar filters={filters} setFilters={setFilters} />;
}

function Sidebar({ filters, setFilters }: Props) {
  return <SearchBox filters={filters} setFilters={setFilters} />;
}

<Disclosure defaultOpen />
<Disclosure open={open} onOpenChange={setOpen} />

State owner adalah boundary yang membuat, mengubah, memvalidasi, mereset, dan menyinkronkan state.
Letakkan state sedekat mungkin dengan penggunaan, naikkan hanya jika ada alasan.
Controlled component berarti parent source of truth; uncontrolled berarti component source of truth.
Jangan menyalin props ke state kecuali sedang membuat draft/optimistic layer dengan reset semantics jelas.
Callback harus membawa intent, bukan membocorkan setter.
State yang menjaga invariant bersama sebaiknya dimiliki boundary yang sama.