Toolbar button membuka modal yang dirender jauh di AppShell
Table row memicu toast yang hidup di root provider
Form field membaca permission dari route boundary
Sidebar selection memengaruhi main panel dan breadcrumb
Wizard step memengaruhi footer action bar
Nested page ingin mengubah document title, command palette, or route search params

parent renders child with props
child reports intent upward through callback
context makes scoped values available downward
external store lets many nodes subscribe to shared external source

How can C talk to D?

What shared abstraction owns this coordination?

route boundary
layout boundary
feature provider
external store
server-state cache
URL
modal/toast capability provider
state machine actor
command bus

a compound component
an application shell
a route segment
a feature module
a microfrontend island
a portal layer
a server/client boundary
a workflow actor tree

Never promote state farther than its lifecycle requires.

1. Can the state stay local?
2. Can the closest common owner hold it?
3. Is the problem actually composition/slot injection?
4. Is the value a scoped dependency? Use Context.
5. Is the state route-addressable? Use URL.
6. Is the state server-owned? Use server-state cache.
7. Is it high fan-out client state? Use external store.
8. Is it a UI capability? Use capability provider.
9. Is it a true decoupled event? Use event bus with strict rules.
10. Is it an imperative DOM/component command? Use ref handle.

function CaseWorkspace() {
  const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);

  return (
    <WorkspaceLayout
      sidebar={
        <CaseList
          selectedCaseId={selectedCaseId}
          onSelectCase={setSelectedCaseId}
        />
      }
      content={
        <CaseDetail caseId={selectedCaseId} />
      }
    />
  );
}

state is needed by a small subtree
state lifecycle matches that subtree
updates are not extremely frequent
owner can express the transition clearly

<App
  selectedCaseId={selectedCaseId}
  onSelectCase={setSelectedCaseId}
  activeFilter={activeFilter}
  onFilterChange={setActiveFilter}
  draftComment={draftComment}
  onDraftCommentChange={setDraftComment}
  modalState={modalState}
  onModalChange={setModalState}
/>

route state -> route component
modal state -> modal provider or modal host
filter state -> URL/search params or feature owner
draft state -> local form owner
server data -> query cache

function Page() {
  return (
    <>
      <Header />
      <Content />
    </>
  );
}

function Content() {
  // wants to modify Header actions somehow
}

function CasePage() {
  const actions = <CaseActions />;

  return (
    <PageShell header={<Header actions={actions} />}>
      <CaseDetail />
    </PageShell>
  );
}

function CaseRoute() {
  const [headerActions, setHeaderActions] = useState<ReactNode>(null);

  return (
    <HeaderContributionContext.Provider value={setHeaderActions}>
      <PageShell header={<Header actions={headerActions} />}>
        <CaseDetail />
      </PageShell>
    </HeaderContributionContext.Provider>
  );
}

theme
density
direction
current route permissions
form field registration
modal service
analytics service
feature commands

what is the provider scope?
what is the value lifecycle?
who may update it?
what rerenders when it changes?
is this data or capability?

type PermissionContextValue = {
  canApprove: boolean;
  canEscalate: boolean;
  canAssign: boolean;
};

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

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

function CaseRoute({ permissions }: { permissions: PermissionContextValue }) {
  return (
    <PermissionContext.Provider value={permissions}>
      <CasePage />
    </PermissionContext.Provider>
  );
}

function EscalateButton() {
  const { canEscalate } = usePermissions();

  return (
    <button disabled={!canEscalate}>
      Escalate
    </button>
  );
}

type ToastCommand = {
  kind: 'success' | 'error' | 'info';
  message: string;
};

type ToastApi = {
  show(command: ToastCommand): void;
};

const ToastContext = createContext<ToastApi | null>(null);

export function useToast() {
  const api = useContext(ToastContext);
  if (!api) {
    throw new Error('useToast must be used inside ToastProvider');
  }
  return api;
}

function ToastProvider({ children }: { children: ReactNode }) {
  const [toasts, setToasts] = useState<Array<ToastCommand & { id: string }>>([]);

  const api = useMemo<ToastApi>(() => ({
    show(command) {
      setToasts(current => [
        ...current,
        { ...command, id: crypto.randomUUID() },
      ]);
    },
  }), []);

  return (
    <ToastContext.Provider value={api}>
      {children}
      <ToastViewport toasts={toasts} />
    </ToastContext.Provider>
  );
}

function SaveButton() {
  const toast = useToast();

  async function handleSave() {
    await save();
    toast.show({ kind: 'success', message: 'Saved' });
  }

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

toast.show({ kind: 'success', message: 'Saved' });
modal.confirm({ title: 'Delete case?' });
commandPalette.open();
analytics.track({ name: 'case_saved' });

bus.emit('toast', payload);
bus.emit('modal:open', payload);
bus.emit('case:saved', payload);

publisher and subscriber are intentionally decoupled
there may be multiple subscribers
the event represents something that happened, not a command to a single host
lifecycle and cleanup are strictly controlled
ordering semantics are documented

selected tab
search text
filter conditions
sort order
pagination cursor
view mode
entity id

function CaseSearchRoute() {
  const [searchParams, setSearchParams] = useSearchParams();

  const filters = parseFilters(searchParams);

  function updateFilters(next: CaseFilters) {
    setSearchParams(serializeFilters(next));
  }

  return (
    <CaseSearchPage
      filters={filters}
      onFiltersChange={updateFilters}
    />
  );
}

FilterPanel reads filters
ResultTable reads filters
Breadcrumb reads filters
ExportButton reads filters
Browser history tracks filters

stable key names
versioned encoding for complex filters
default value normalization
avoid encoding sensitive state
avoid huge state blobs

?state={massive-json-dump}
?token=secret
?draftComment=private-text

?status=open&assignee=me&page=2&sort=updated_desc

CaseHeader shows case status
CaseTimeline shows latest action
CaseActionPanel mutates case status
CaseList row also displays case status

manual fan-out updates
stale duplicated data
hidden imperative callbacks
inconsistent views after mutation

selection model for a large table
collaborative editor local presence
client-side command palette registry
feature-wide UI store
workspace layout state
multi-panel drag state

type WorkspaceState = {
  selectedPanelId: string | null;
  sidebarCollapsed: boolean;
};

type Listener = () => void;

function createWorkspaceStore(initial: WorkspaceState) {
  let state = initial;
  const listeners = new Set<Listener>();

  return {
    getSnapshot() {
      return state;
    },
    subscribe(listener: Listener) {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
    setState(updater: (state: WorkspaceState) => WorkspaceState) {
      state = updater(state);
      listeners.forEach(listener => listener());
    },
  };
}

function useWorkspaceSnapshot() {
  return useSyncExternalStore(
    workspaceStore.subscribe,
    workspaceStore.getSnapshot,
    workspaceStore.getSnapshot,
  );
}

Use external store when you need shared client state with independent subscriptions.
Do not use it merely to avoid thinking about ownership.

type ModalApi = {
  confirm(options: ConfirmOptions): Promise<boolean>;
};

function DeleteButton({ caseId }: { caseId: string }) {
  const modal = useModal();
  const toast = useToast();

  async function handleDelete() {
    const confirmed = await modal.confirm({
      title: 'Delete case?',
      description: 'This cannot be undone.',
    });

    if (!confirmed) return;

    await deleteCase(caseId);
    toast.show({ kind: 'success', message: 'Case deleted' });
  }

  return <button onClick={handleDelete}>Delete</button>;
}

Promise-returning modal APIs are convenient but can hide workflow state.
For complex workflows, model the flow explicitly with reducer/state machine.

type WorkspaceCommand =
  | { type: 'openPanel'; panelId: string }
  | { type: 'closePanel'; panelId: string }
  | { type: 'focusSearch' };

type WorkspaceCommands = {
  dispatch(command: WorkspaceCommand): void;
};

const WorkspaceCommandContext = createContext<WorkspaceCommands | null>(null);

function WorkspaceProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(workspaceReducer, initialWorkspace);

  const commands = useMemo<WorkspaceCommands>(() => ({
    dispatch,
  }), []);

  return (
    <WorkspaceCommandContext.Provider value={commands}>
      <WorkspaceStateContext.Provider value={state}>
        {children}
      </WorkspaceStateContext.Provider>
    </WorkspaceCommandContext.Provider>
  );
}

function SearchShortcutButton() {
  const { dispatch } = useWorkspaceCommands();

  return (
    <button onClick={() => dispatch({ type: 'focusSearch' })}>
      Focus search
    </button>
  );
}

command identity can stay stable
command users do not rerender for state changes
readers and writers can be governed separately

UI component -> intent port -> owner/provider/store -> transition -> new snapshot

const { setModalState, setToasts, setSidebarCollapsed, setSelectedCase } = useAppContext();

const modal = useModal();
const toast = useToast();
const workspace = useWorkspaceCommands();

What can this component do?
What is it allowed to read?
What transitions can happen?
Where is the side effect boundary?

Deep content can contribute actions to route header/footer.
The route owns the slot.
Cleanup happens automatically on unmount.
The API is scoped to the route, not global.

type ActionContribution = {
  id: string;
  node: ReactNode;
  order?: number;
};

type ActionRegistry = {
  register(action: ActionContribution): () => void;
};

const ActionRegistryContext = createContext<ActionRegistry | null>(null);

function useActionRegistry() {
  const registry = useContext(ActionRegistryContext);
  if (!registry) {
    throw new Error('useActionRegistry must be used inside ActionRegistryProvider');
  }
  return registry;
}

function ActionRegistryProvider({ children }: { children: ReactNode }) {
  const [actions, setActions] = useState<ActionContribution[]>([]);

  const registry = useMemo<ActionRegistry>(() => ({
    register(action) {
      setActions(current => {
        const withoutSame = current.filter(item => item.id !== action.id);
        return [...withoutSame, action].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
      });

      return () => {
        setActions(current => current.filter(item => item.id !== action.id));
      };
    },
  }), []);

  return (
    <ActionRegistryContext.Provider value={registry}>
      <RouteShell actions={actions.map(action => action.node)}>
        {children}
      </RouteShell>
    </ActionRegistryContext.Provider>
  );
}

function useActionContribution(action: ActionContribution) {
  const registry = useActionRegistry();

  useEffect(() => {
    return registry.register(action);
  }, [registry, action]);
}

function CaseDetailActions({ caseId }: { caseId: string }) {
  const action = useMemo<ActionContribution>(() => ({
    id: `approve-${caseId}`,
    order: 10,
    node: <ApproveCaseButton caseId={caseId} />,
  }), [caseId]);

  useActionContribution(action);

  return null;
}

const app = useAppContext();

app.setCurrentCase(case);
app.setModal({ type: 'delete-case' });
app.setToast({ message: 'Saved' });
app.analytics.track('case_saved');
app.router.navigate('/cases');

unclear authority
hard to test
accidental rerender fan-out
weak type boundary
no transition audit
no feature ownership
no clear migration path

const modal = useModal();
const toast = useToast();
const analytics = useAnalytics();
const caseCommands = useCaseCommands();

function useApproveCaseFlow(caseId: string) {
  const modal = useModal();
  const toast = useToast();
  const approveCase = useApproveCaseMutation();

  return async function approve() {
    const confirmed = await modal.confirm({ title: 'Approve case?' });
    if (!confirmed) return;

    await approveCase.mutateAsync({ caseId });
    toast.show({ kind: 'success', message: 'Case approved' });
  };
}

read theme
read current permission
read selected workspace
read feature flags
read query data

open modal
enqueue toast
mutate server data
dispatch workflow event
update URL param

const WorkspaceStateContext = createContext<WorkspaceState | null>(null);
const WorkspaceCommandsContext = createContext<WorkspaceCommands | null>(null);

const WorkspaceContext = createContext<{
  state: WorkspaceState;
  setState: Dispatch<SetStateAction<WorkspaceState>>;
} | null>(null);

State is global only because two distant components needed it once.

lifecycle becomes app-wide
state survives longer than expected
unrelated screens observe or mutate it

move state to route/provider scope
or encode in URL/server cache if lifecycle requires it

mouse position, drag state, scroll position, resize metrics in context

large subtree rerenders too often

external store with selective subscription
localize state
throttle updates
use DOM/ref for non-render-critical values

commands.dispatch({ type: 'anything', payload: unknown });

no domain boundary
weak auditability
large switch statements
unclear ownership

split capability APIs
use typed domain commands
move workflow into reducer/machine

Deep child modifies header/footer/sidebar through contribution registry.

layout cannot be understood from route component
cleanup bugs can leave stale actions

prefer explicit slot composition
use registry only when dynamic contribution is essential
ensure cleanup on unmount

Deep component triggers command; host state changes after caller unmounts.

stale promise continuation
modal resolves into unmounted workflow
lost updates

AbortController
mounted guard for non-critical UI continuation
state machine actor lifecycle
idempotent commands

What is being communicated: data, intent, command, event, or capability?
Is this state local, route, URL, server, external, or workflow state?
What is the smallest correct owner?
Does the channel make authority explicit?
Does the reader subscribe only to what it needs?
Can this update violate invariants?
Can it leak after unmount?
Is cleanup deterministic?
Is ordering important?
Is the contract typed and named by domain intent?
Can we test the interaction without rendering the whole app?

<App permission={permission}>
  <Layout permission={permission}>
    <Page permission={permission}>
      <Panel permission={permission}>
        <Button permission={permission} />
      </Panel>
    </Page>
  </Layout>
</App>

<PermissionProvider value={permission}>
  <Layout>
    <Page />
  </Layout>
</PermissionProvider>

const { setToast, setModal, setSidebarOpen } = useAppContext();

const toast = useToast();
const modal = useModal();
const workspace = useWorkspaceCommands();

const { filters, setFilters } = useSearchStore();

const filters = parseFilters(searchParams);
const setFilters = updateSearchParams;

const [caseRecord, setCaseRecord] = useState<CaseRecord | null>(null);

const caseQuery = useCaseQuery(caseId);
const approveCase = useApproveCaseMutation();

How do I make distant components talk?

Who owns the thing being coordinated?
What is the lifecycle of that thing?
What channel expresses that lifecycle with the least coupling?