jumlah fitur naik,
jumlah provider naik,
jumlah consumer naik,
update frequency naik,
dan domain logic mulai bocor ke primitive UI.

Context dipakai untuk menyembunyikan coupling, bukan mengelola dependency secara eksplisit.

type AppContextValue = {
  user: User;
  theme: Theme;
  permissions: PermissionMap;
  currentCase: Case;
  selectedRows: string[];
  filters: Filters;
  queryResult: QueryResult<Case[]>;
  isSidebarOpen: boolean;
  setSidebarOpen: (open: boolean) => void;
  openModal: (modal: ModalConfig) => void;
  refreshCases: () => Promise<void>;
};

- Component sulit dipakai ulang karena butuh AppContext.
- Test perlu mock context raksasa.
- Update kecil memicu rerender luas.
- Developer tidak tahu data berasal dari mana.
- Business logic menyebar ke component random.

SessionProvider        -> user/session capability
ThemeProvider          -> theme environment
PermissionProvider     -> policy/capability, jika memang scoped
Route loader/query     -> current route data
TableProvider/store    -> table state
URL search params      -> filters shareable
Query cache            -> server state
LayoutProvider         -> sidebar/layout state
ModalProvider          -> modal command capability

function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider>
      <SessionProvider>
        <PermissionProvider>
          <ModalProvider>
            {children}
          </ModalProvider>
        </PermissionProvider>
      </SessionProvider>
    </ThemeProvider>
  );
}

// "Let's put it in context so everyone can access it."
const CurrentTabContext = createContext(...);

Siapa yang memiliki state ini?
Siapa yang boleh mengubahnya?
Berapa lama lifecycle-nya?
Apakah perlu survive route change?
Apakah perlu shareable via URL?
Apakah server adalah source of truth?
Apakah hanya parent-child biasa?

function Page() {
  const [activeTab, setActiveTab] = useState('summary');

  return (
    <>
      <TabHeader activeTab={activeTab} onTabChange={setActiveTab} />
      <TabContent activeTab={activeTab} />
    </>
  );
}

Prop drilling dua atau tiga level bukan otomatis masalah.
Context dipakai ketika dependency memang ambient atau scope-nya jelas.

function SubmitButton() {
  const caseWorkflow = useCaseWorkflow();
  const permission = usePermission();
  const toast = useToast();

  return (
    <Button
      disabled={!permission.canSubmit}
      onClick={() => caseWorkflow.submit().then(() => toast.success('Submitted'))}
    >
      Submit
    </Button>
  );
}

- Component gagal saat dipakai di Storybook tanpa banyak provider.
- Test setup membengkak.
- Reuse di page lain sulit.
- Component menjadi feature component tapi disimpan di shared/ui.

function SubmitCaseButton({ caseId }: { caseId: string }) {
  const workflow = useCaseWorkflow(caseId);
  const permission = useCasePermission(caseId);
  const toast = useToast();

  return (
    <Button
      disabled={!permission.canSubmit}
      onClick={async () => {
        await workflow.submit();
        toast.success('Submitted');
      }}
    >
      Submit
    </Button>
  );
}

function SubmitButton({
  disabled,
  onSubmit,
}: {
  disabled: boolean;
  onSubmit: () => Promise<void>;
}) {
  return (
    <Button disabled={disabled} onClick={onSubmit}>
      Submit
    </Button>
  );
}

<MouseContext value={{ x, y }}>
  {children}
</MouseContext>

<ScrollContext value={{ scrollTop }}>
<HoverContext value={{ hoveredRowId }}>
<SelectionContext value={{ selectedCellId }}>
<InputContext value={{ currentText }}>

- Typing terasa lambat.
- Hover membuat list besar rerender.
- Scroll jank.
- Profiler menunjukkan banyak consumer rerender karena provider value berubah.

<GridCommandContext value={{ selectRow, clearSelection, focusCell }}>
  {children}
</GridCommandContext>

function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  return (
    <AuthContext value={{ user, login, logout, setUser }}>
      {children}
    </AuthContext>
  );
}

function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = useCallback(async (credentials: Credentials) => {
    const user = await authApi.login(credentials);
    setUser(user);
  }, []);

  const logout = useCallback(async () => {
    await authApi.logout();
    setUser(null);
  }, []);

  const value = useMemo(
    () => ({ user, login, logout }),
    [user, login, logout]
  );

  return <AuthContext value={value}>{children}</AuthContext>;
}

<AuthStateContext value={user}>
  <AuthCommandContext value={commands}>
    {children}
  </AuthCommandContext>
</AuthStateContext>

const value = useMemo(() => ({ state, dispatch }), [state]);

Jika consumer A hanya butuh `state.theme`,
dan consumer B hanya butuh `state.user`,
dan consumer C hanya butuh `state.selectedRows`,
maka satu context state besar tetap membuat semuanya saling terikat.

const PermissionContext = createContext({
  can: () => false,
});

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

export function usePermission() {
  const value = useContext(PermissionContext);

  if (!value) {
    throw new Error('usePermission must be used inside PermissionProvider');
  }

  return value;
}

<ThemeProvider>
  <DensityProvider>
    <DirectionProvider>
      <AuthProvider>
        <PermissionProvider>
          <FeatureFlagProvider>
            <QueryClientProvider>
              <ModalProvider>
                <ToastProvider>
                  <Routes />
                </ToastProvider>
              </ModalProvider>
            </QueryClientProvider>
          </FeatureFlagProvider>
        </PermissionProvider>
      </AuthProvider>
    </DirectionProvider>
  </DensityProvider>
</ThemeProvider>

function composeProviders(...providers: React.ComponentType<{ children: React.ReactNode }>[]) {
  return providers.reduce(
    (Accumulated, Provider) => {
      return function ComposedProvider({ children }: { children: React.ReactNode }) {
        return (
          <Accumulated>
            <Provider>{children}</Provider>
          </Accumulated>
        );
      };
    },
    ({ children }: { children: React.ReactNode }) => <>{children}</>
  );
}

const AppProviders = composeProviders(
  ThemeProvider,
  DensityProvider,
  DirectionProvider,
  AuthProvider,
  PermissionProvider,
  ModalProvider,
  ToastProvider
);

function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <SessionProvider>
      <PermissionProvider>
        <FeatureFlagProvider>
          {children}
        </FeatureFlagProvider>
      </PermissionProvider>
    </SessionProvider>
  );
}

function SearchPage() {
  const [query, setQuery] = useState('');

  return (
    <SearchContext value={{ query, setQuery }}>
      <SearchInput />
      <SearchResults />
    </SearchContext>
  );
}

function App() {
  return routes.map(route => (
    <Route key={route.path} element={<FeatureProvider><route.Component /></FeatureProvider>} />
  ));
}

- Form reset saat parent rerender.
- Tab state hilang saat filter berubah.
- Subscription reconnect terus.
- Provider effect cleanup/setup berulang.

const EventBusContext = createContext({
  emit: (event: Event) => {},
  on: (type: string, handler: Handler) => () => {},
});

- Sulit tahu siapa mendengar event apa.
- Handler lupa unsubscribe.
- Event order sulit dijamin.
- Component bereaksi pada event yang tidak terlihat dari JSX.
- Debugging memerlukan tracing manual.

type ToastCapability = {
  success: (message: string) => void;
  error: (message: string) => void;
};

Prefer typed capability over generic event bus.
Prefer explicit command over string event.
Prefer scoped provider over global emitter.

function CasesProvider({ children }: { children: React.ReactNode }) {
  const [cases, setCases] = useState<Case[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetchCases()
      .then(setCases)
      .finally(() => setLoading(false));
  }, []);

  return (
    <CasesContext value={{ cases, loading, setCases }}>
      {children}
    </CasesContext>
  );
}

function CasesPage() {
  const query = useCasesQuery(filters);

  return <CasesView cases={query.data ?? []} loading={query.isLoading} />;
}

const query = useCaseQuery(caseId);
const [currentCase, setCurrentCase] = useState(query.data);

<CaseContext value={{ currentCase, setCurrentCase }}>

query cache says A
context says B
UI shows maybe A or B depending component

function CaseEditor({ caseId }: { caseId: string }) {
  const caseQuery = useCaseQuery(caseId);
  const [draft, setDraft] = useState(() => createDraft(caseQuery.data));

  // draft adalah local editing state, bukan duplikat global permanen
}

<FilterContext value={{ filters, setFilters }}>

/cases?status=open&assignee=me&page=2

function DeleteButton() {
  const permission = usePermission();

  if (!permission.canDelete) return null;

  return <Button>Delete</Button>;
}

// Bad smell
<Button action="delete-case">Delete</Button>

function DeleteCaseButton({ caseId }: { caseId: string }) {
  const permission = useCasePermission(caseId);

  if (!permission.canDelete) return null;

  return <Button intent="danger">Delete</Button>;
}

UI permission decision belongs near product/domain component,
not hidden inside generic design-system primitive.

const value = {
  current: { count: 0 },
  increment() {
    value.current.count++;
  },
};

function CounterProvider({ children }: { children: React.ReactNode }) {
  const [count, dispatch] = useReducer(counterReducer, 0);

  return (
    <CounterStateContext value={count}>
      <CounterDispatchContext value={dispatch}>
        {children}
      </CounterDispatchContext>
    </CounterStateContext>
  );
}

<CaseContext value={{ caseState, setCaseState }}>

- Invariant mudah dilanggar.
- Sulit audit siapa mengubah apa.
- Business transition tersebar.
- Illegal state mudah terbentuk.

type CaseWorkflowContextValue = {
  state: CaseWorkflowState;
  assign: (assigneeId: string) => void;
  submitForReview: () => Promise<void>;
  reject: (reason: string) => Promise<void>;
};

type CaseWorkflowEvent =
  | { type: 'ASSIGN'; assigneeId: string }
  | { type: 'SUBMIT_FOR_REVIEW' }
  | { type: 'REJECT'; reason: string };

type UploadContextValue = {
  isUploading: boolean;
  isSuccess: boolean;
  isError: boolean;
  progress: number;
  error?: Error;
};

isUploading=true, isSuccess=true, isError=true
progress=120
error exists while isSuccess=true

type UploadState =
  | { status: 'idle' }
  | { status: 'uploading'; progress: number }
  | { status: 'success'; fileId: string }
  | { status: 'error'; error: Error };

function Layout() {
  return (
    <LayoutContext value={{ title: 'Cases', actions: <CaseActions /> }}>
      <Page />
    </LayoutContext>
  );
}

function Header() {
  const layout = useContext(LayoutContext);
  return <>{layout.title}{layout.actions}</>;
}

function Layout({
  title,
  actions,
  children,
}: {
  title: React.ReactNode;
  actions?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <>
      <Header title={title} actions={actions} />
      <main>{children}</main>
    </>
  );
}

const createStateContext = <T,>() => {
  const Context = createContext<[T, Dispatch<SetStateAction<T>>] | null>(null);
  // generic Provider, generic hook, generic everything
};

const [state, setState] = useCaseContext();

const workflow = useCaseWorkflow();
workflow.submitForReview();

shared/ui/Button.tsx          imports AppContext
features/cases/List.tsx       imports AppContext
features/reports/Chart.tsx    imports AppContext
features/admin/Users.tsx      imports AppContext

function CasesPage() {
  const query = useCasesQuery();
  const commands = useCaseCommands();

  return <CasesView cases={query.data ?? []} onAssign={commands.assign} />;
}

// Bad for shared library
function DataTable() {
  const queryClient = useCompanyQueryClient();
  const permission = useCompanyPermission();
  const router = useCompanyRouter();
  // ...
}

function DataTable<T>({
  rows,
  columns,
  getRowId,
  onRowClick,
}: DataTableProps<T>) {
  // generic UI table
}

function CaseTable() {
  const cases = useCasesQuery();
  const router = useRouter();

  return (
    <DataTable
      rows={cases.data ?? []}
      columns={caseColumns}
      getRowId={row => row.id}
      onRowClick={row => router.navigate(`/cases/${row.id}`)}
    />
  );
}

function UserProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

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

  return <UserContext value={user}>{children}</UserContext>;
}

type SessionState =
  | { status: 'loading' }
  | { status: 'authenticated'; user: User }
  | { status: 'anonymous' }
  | { status: 'error'; error: Error };

function ExpensiveProvider({ children }: { children: React.ReactNode }) {
  const value = buildHugePermissionGraph(loadFromStorage(), computeRules(), parsePolicies());

  return <PermissionContext value={value}>{children}</PermissionContext>;
}

const defaultPolicyGraph = buildStaticPolicyGraph(staticRules);

function PermissionProvider({ policies, children }: Props) {
  const graph = useMemo(
    () => mergePolicyGraph(defaultPolicyGraph, policies),
    [policies]
  );

  return <PermissionContext value={graph}>{children}</PermissionContext>;
}

function SettingsProvider({ children }: { children: React.ReactNode }) {
  const [settings, setSettings] = useState(() =>
    JSON.parse(localStorage.getItem('settings')!)
  );

  useEffect(() => {
    localStorage.setItem('settings', JSON.stringify(settings));
  }, [settings]);

  return <SettingsContext value={{ settings, setSettings }}>{children}</SettingsContext>;
}

type SettingsStorage = {
  read: () => Settings | null;
  write: (settings: Settings) => void;
  subscribe?: (listener: () => void) => () => void;
};

function reducer(state: WorkflowState, event: WorkflowEvent): WorkflowState {
  const next = transition(state, event);

  if (process.env.NODE_ENV !== 'production') {
    console.debug('[CaseWorkflow]', { event, previous: state, next });
  }

  return next;
}

commands.submitForReview = async () => {
  telemetry.track('case.submit_for_review.clicked', { caseId });
  await submitForReview(caseId);
};

1. Context apa yang paling banyak consumer-nya?
2. Context apa yang paling sering update?
3. Context value mana yang object besar?
4. Provider mana yang berada terlalu tinggi?
5. Component shared mana yang import domain context?
6. Test mana yang butuh provider setup paling besar?
7. Context mana yang membawa server state?
8. Context mana yang punya raw setter?
9. Context mana yang punya default value palsu?
10. Context mana yang berubah saat typing/hover/scroll?

function useDebugContextChange<T>(name: string, value: T) {
  const previousRef = useRef<T | null>(null);

  useEffect(() => {
    if (previousRef.current !== value) {
      console.debug(`[context:${name}] value changed`, {
        previous: previousRef.current,
        next: value,
      });
      previousRef.current = value;
    }
  }, [name, value]);
}

Before:
  Child reads CurrentCaseContext.

After:
  Page reads data, passes `case` prop to Child.

Before:
  Header reads LayoutContext for title/actions.

After:
  <Layout title actions>{children}</Layout>

Before:
  setWorkflowState(anything)

After:
  dispatch({ type: 'SUBMIT_FOR_REVIEW' })

Before:
  { state, dispatch }

After:
  StateContext + DispatchContext

Before:
  GridContext carries all grid state.

After:
  GridStoreContext carries store instance.
  Cells subscribe with selector.

Before:
  CasesProvider fetches and stores cases.

After:
  useCasesQuery + query cache invalidation.

Before:
  FilterContext stores filters.

After:
  search params are source of truth.

Before:
  Random field ids passed manually.

After:
  <Field><Label/><Input/><Error/></Field>

theme             -> environment context
user              -> session context
permissions       -> capability/policy context
currentCase       -> route/query data
selectedRows      -> table state
filters           -> URL state
modal             -> capability context
queryResult       -> query cache

function useLegacyAppContext() {
  return useContext(AppContext);
}

function useThemeMode() {
  const legacy = useLegacyAppContext();
  return legacy.theme.mode;
}

// Before
app.setCurrentCase(nextCase);

// After
caseCommands.updateDraft(patch);

type AppContextValue = {
  user: User | null;
  theme: 'light' | 'dark';
  cases: Case[];
  selectedCaseIds: string[];
  filters: CaseFilters;
  setFilters: (filters: CaseFilters) => void;
  openModal: (config: ModalConfig) => void;
  can: (action: string) => boolean;
};

// Environment
const ThemeContext = createContext<ThemeContextValue | null>(null);

// Session
const SessionContext = createContext<SessionState | null>(null);

// Capability
const ModalContext = createContext<ModalCommands | null>(null);
const PermissionContext = createContext<PermissionService | null>(null);

// Page-level
function CasesPage() {
  const filters = useCaseFiltersFromUrl();
  const cases = useCasesQuery(filters);
  const selection = useCaseSelectionStore();

  return (
    <CaseSelectionProvider store={selection}>
      <CasesView cases={cases.data ?? []} />
    </CaseSelectionProvider>
  );
}

Session bukan theme.
Theme bukan modal.
Modal bukan server cache.
Server cache bukan selection state.
Selection state bukan URL filters.

1. Tidak boleh membuat `AppContext` baru.
2. Context harus punya nama spesifik.
3. Context wajib punya owner module.
4. Context wajib punya documented scope.
5. Context wajib punya update frequency expectation.
6. Context wajib punya custom hook.
7. Context wajib punya test harness.
8. Context tidak boleh membawa server state tanpa ADR.
9. Context tidak boleh membawa high-frequency state global.
10. Shared UI tidak boleh import feature/domain context.

# ADR: CaseSelectionStoreContext

## Problem
Case table has 10k virtualized rows and needs selection from toolbar, rows, and bulk-action panel.

## Decision
Use Context only to provide a selector-based external store instance.
Do not put selected row array directly in Context.

## Consequences
Rows subscribe by id.
Toolbar subscribes to aggregate count.
Selection can be reset on route change by remounting provider.

This subtree lives under this theme.
This field part belongs to this field.
This tab trigger belongs to this tabs root.
This component may call this scoped capability.
This page section uses this specific workflow service.

I don't want to pass props.
Many components might need this someday.
This is convenient.
Let's make it global.

[ ] Apa bedanya Context sebagai data passing, dependency injection, dan capability passing?
[ ] Kapan Context lebih baik dari props?
[ ] Kapan props lebih baik dari Context?
[ ] Kapan Context harus diganti external store?
[ ] Kapan server state tidak boleh masuk Context?
[ ] Kenapa provider value identity penting?
[ ] Kenapa default context value bisa berbahaya?
[ ] Bagaimana split state dan command context?
[ ] Bagaimana Context membantu compound component?
[ ] Bagaimana Context membantu design system tanpa menggantikan CSS?
[ ] Apa smell dari AppContext?
[ ] Bagaimana migrasi context besar tanpa big bang rewrite?

Context is a scoped dependency mechanism.
Context is not a dumping ground.
Context is not a cache by default.
Context is not a security boundary.
Context is not a replacement for state modeling.
Context is not a fix for unclear ownership.