const value = useContext(SomeContext);

cost = update frequency × consumer fan-out × render weight × interaction sensitivity

React.memo tidak menghentikan rerender karena context yang dibaca component berubah.

<UserContext.Provider value={{ user, logout }}>
  {children}
</UserContext.Provider>

{ user, logout } !== { user, logout }

const logout = useCallback(() => {
  authClient.logout();
}, [authClient]);

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

return (
  <UserContext.Provider value={value}>
    {children}
  </UserContext.Provider>
);

const value = useMemo(() => ({
  user,
  permissions,
  theme,
  locale,
  notifications,
  selectedRows,
  filters,
  setFilters,
  openModal,
  logout,
}), [
  user,
  permissions,
  theme,
  locale,
  notifications,
  selectedRows,
  filters,
  setFilters,
  openModal,
  logout,
]);

ThemeContext:    1 value, 800 consumers, changes rarely     => usually fine
CursorContext:   1 value, 800 consumers, changes per frame  => disaster
AuthContext:     1 value, 50 consumers, changes on login    => fine
FormContext:     1 object, 120 fields, changes per keypress => suspicious

function App() {
  return (
    <SelectionProvider>
      <Routes />
    </SelectionProvider>
  );
}

function CaseListPage() {
  return (
    <SelectionProvider>
      <CaseListToolbar />
      <CaseTable />
      <BulkActionPanel />
    </SelectionProvider>
  );
}

Put provider as low as ownership allows, not as high as convenience suggests.

<Page>
  <Toolbar user={user} />
  <Sidebar user={user} />
</Page>

- banyak level intermediate tidak peduli value,
- banyak leaf butuh value yang sama,
- provider override bermanfaat,
- value adalah dependency/capability scoped,
- prop drilling menciptakan coupling palsu di component intermediate.

const CounterContext = createContext(null);

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);

  const value = { count, increment: () => setCount(c => c + 1) };

  return <CounterContext.Provider value={value}>{children}</CounterContext.Provider>;
}

const CounterStateContext = createContext<number | null>(null);
const CounterActionsContext = createContext<{
  increment(): void;
} | null>(null);

function CounterProvider({ children }: { children: React.ReactNode }) {
  const [count, setCount] = useState(0);

  const actions = useMemo(() => ({
    increment() {
      setCount(c => c + 1);
    },
  }), []);

  return (
    <CounterActionsContext.Provider value={actions}>
      <CounterStateContext.Provider value={count}>
        {children}
      </CounterStateContext.Provider>
    </CounterActionsContext.Provider>
  );
}

function IncrementButton() {
  const { increment } = useCounterActions();
  return <button onClick={increment}>+</button>;
}

<AppContext.Provider value={{ auth, theme, modal, permissions, notifications }}>
  {children}
</AppContext.Provider>

<AuthProvider>
  <PermissionProvider>
    <ThemeProvider>
      <ModalProvider>
        <NotificationProvider>
          {children}
        </NotificationProvider>
      </ModalProvider>
    </ThemeProvider>
  </PermissionProvider>
</AuthProvider>

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

Form metadata      => jarang berubah
Field values       => berubah sering
Validation errors  => berubah sering tapi per field
Submit status      => berubah saat submit
Form commands      => stabil

<FormConfigProvider>
  <FormCommandsProvider>
    <FieldStoreProvider>
      {children}
    </FieldStoreProvider>
  </FormCommandsProvider>
</FormConfigProvider>

interface ModalCommands {
  open(input: ModalInput): void;
  close(id: string): void;
}

const ModalCommandsContext = createContext<ModalCommands | null>(null);

function ModalProvider({ children }: { children: React.ReactNode }) {
  const [stack, setStack] = useState<ModalEntry[]>([]);

  const commands = useMemo<ModalCommands>(() => ({
    open(input) {
      setStack(stack => [...stack, createModalEntry(input)]);
    },
    close(id) {
      setStack(stack => stack.filter(entry => entry.id !== id));
    },
  }), []);

  return (
    <ModalCommandsContext.Provider value={commands}>
      {children}
      <ModalStack stack={stack} onClose={commands.close} />
    </ModalCommandsContext.Provider>
  );
}

function DeleteButton({ id }: { id: string }) {
  const modal = useModalCommands();

  return (
    <button onClick={() => modal.open({ type: 'confirm-delete', id })}>
      Delete
    </button>
  );
}

function UserPanel() {
  const { user } = useAuthContext();
  return <UserPanelView user={user} />;
}

const UserPanelView = memo(function UserPanelView({ user }: { user: User }) {
  return <ExpensiveUserLayout user={user} />;
});

const TodoStoreContext = createContext<TodoStore | null>(null);

function TodoStoreProvider({ children }: { children: React.ReactNode }) {
  const storeRef = useRef<TodoStore | null>(null);

  if (storeRef.current === null) {
    storeRef.current = createTodoStore();
  }

  return (
    <TodoStoreContext.Provider value={storeRef.current}>
      {children}
    </TodoStoreContext.Provider>
  );
}

function useTodoTitle(id: string) {
  const store = useTodoStore();

  return useSyncExternalStore(
    store.subscribe,
    () => store.getSnapshot().todos[id]?.title,
    () => store.getSnapshot().todos[id]?.title,
  );
}

const userName = useContextSelector(AuthContext, value => value.user.name);

const { user } = useAuthContext();

const Profile = memo(function Profile() {
  const auth = useAuthContext();
  return <div>{auth.user.name}</div>;
});

function Provider({ children }) {
  const [formState, setFormState] = useState({});

  const value = useMemo(() => ({ formState, setFormState }), [formState]);

  return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
}

1. Provider component render ulang.
2. Provider value berubah.

<AuthProvider>
  <ThemeProvider>
    <PermissionProvider>
      <ModalProvider>
        <ToastProvider>{children}</ToastProvider>
      </ModalProvider>
    </PermissionProvider>
  </ThemeProvider>
</AuthProvider>

Typing in one field rerenders entire form, sidebar, toolbar, and preview panel.

Typing in one field rerenders field itself, dependent validation message, and submit eligibility indicator.

interface AuthValue {
  user: User | null;
  status: 'loading' | 'authenticated' | 'anonymous';
  login(input: LoginInput): Promise<void>;
  logout(): Promise<void>;
}

interface BadAuthValue {
  user: User | null;
  permissions: Permission[];
  organization: Organization;
  billingPlan: BillingPlan;
  featureFlags: Record<string, boolean>;
  notifications: Notification[];
  unreadCount: number;
  login(): Promise<void>;
  logout(): Promise<void>;
  markNotificationRead(id: string): void;
  switchOrganization(id: string): void;
}

AuthSessionContext      => user/status/login/logout
PermissionContext       => can/check capability
OrganizationContext     => selected org/workspace
FeatureFlagContext      => flag reader
NotificationStore       => server/external store

<ThemeContext.Provider value={theme}>
  {children}
</ThemeContext.Provider>

<ThemeContext.Provider value={{ mode, tokens: buildTokens(mode) }}>
  {children}
</ThemeContext.Provider>

const tokens = useMemo(() => buildTokens(mode), [mode]);
const value = useMemo(() => ({ mode, tokens }), [mode, tokens]);

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

function TextField({ defaultValue, onCommit }) {
  const [draft, setDraft] = useState(defaultValue);

  return (
    <input
      value={draft}
      onChange={e => setDraft(e.target.value)}
      onBlur={() => onCommit(draft)}
    />
  );
}

function useFieldValue(name: string) {
  const store = useFormStore();

  return useSyncExternalStore(
    store.subscribeField(name),
    () => store.getFieldValue(name),
    () => store.getFieldValue(name),
  );
}

FormConfigContext
FormCommandsContext
FormSubmitStatusContext
FieldRegistryContext

<TableContext.Provider value={{ rows, selectedIds, toggleSelected }}>
  {children}
</TableContext.Provider>

Rows data       => server cache/query
Selection store => external store with per-row selector
Commands        => stable context

function RowCheckbox({ rowId }: { rowId: string }) {
  const selected = useRowSelected(rowId);
  const selection = useSelectionCommands();

  return (
    <input
      type="checkbox"
      checked={selected}
      onChange={() => selection.toggle(rowId)}
    />
  );
}

<CaseContext.Provider value={{ cases, refetch, updateCase }}>
  {children}
</CaseContext.Provider>

TanStack Query / framework loader / route data / server cache owns server state.
Context may pass stable domain commands or query parameter scope.

const CaseScopeContext = createContext<{ tenantId: string } | null>(null);

const [filters, setFilters] = useState(readFiltersFromUrl());

useEffect(() => {
  writeFiltersToUrl(filters);
}, [filters]);

URL/search params are source of truth.
Components read/write through router APIs or a custom hook.
Context may pass typed route-scope helpers if needed.

const PermissionContext = createContext<Permission[]>([]);

interface PermissionCapability {
  can(action: string, resource: ResourceRef): boolean;
}

1. Reproduce slow interaction.
2. Use React DevTools Profiler.
3. Identify which components render.
4. Identify why they render: prop, state, context, parent.
5. Find high-frequency source.
6. Inspect provider value identity.
7. Inspect consumer fan-out.
8. Split/move/select state.
9. Re-profile.

Which context changed?
How many consumers read it?
Did value identity change accidentally?
Is the value too broad?
Is update frequency too high?
Are heavy components reading context directly?
Can provider move lower?
Can read/write be split?
Does this need external store selectors?

function useLogChangedDeps(name: string, deps: Record<string, unknown>) {
  const prev = useRef<Record<string, unknown> | null>(null);

  useEffect(() => {
    if (prev.current === null) {
      prev.current = deps;
      return;
    }

    for (const key of Object.keys(deps)) {
      if (!Object.is(prev.current[key], deps[key])) {
        console.log(`${name}: ${key} changed`, {
          before: prev.current[key],
          after: deps[key],
        });
      }
    }

    prev.current = deps;
  });
}

useLogChangedDeps('AuthProvider value deps', {
  user,
  login,
  logout,
  permissions,
});

const AppContext = createContext<AppContextValue | null>(null);

Component       Reads
Header          user, theme, logout
Sidebar         user, permissions
DeleteButton    permissions, openModal
ToastHost       toasts
CaseTable       filters, selectedRows, setSelectedRows

Auth: user/logout                      rare
Theme: theme                           rare
Permission: can()                      rare
Modal commands: open/close             stable commands
Toast state: toasts                    event-driven
Table selection: selectedRows          frequent
Filters: URL/search params             route state

AuthContext
ThemeContext
PermissionContext
ModalCommandsContext
ToastStoreContext
SelectionStoreContext

const SelectionContext = createContext<{
  selectedIds: Set<string>;
  toggle(id: string): void;
} | null>(null);

const SelectionStoreContext = createContext<SelectionStore | null>(null);

type Listener = () => void;

function createSelectionStore() {
  let selectedIds = new Set<string>();
  const listeners = new Set<Listener>();

  return {
    subscribe(listener: Listener) {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
    getSnapshot() {
      return selectedIds;
    },
    isSelected(id: string) {
      return selectedIds.has(id);
    },
    toggle(id: string) {
      selectedIds = new Set(selectedIds);

      if (selectedIds.has(id)) {
        selectedIds.delete(id);
      } else {
        selectedIds.add(id);
      }

      listeners.forEach(listener => listener());
    },
  };
}

function useIsSelected(id: string) {
  const store = useSelectionStore();

  return useSyncExternalStore(
    store.subscribe,
    () => store.isSelected(id),
    () => false,
  );
}

() => ({ selected: store.isSelected(id) })

() => store.isSelected(id)

Who owns this state?
Who subscribes to it?
How often does it change?
How big is its blast radius?

const { user, theme, filters, modal, permissions, notifications } = useAppContext();

Split by ownership, volatility, and capability.

<AuthContext.Provider value={{ user, login, logout }}>

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

<AppProvider value={{ selectedRows, setSelectedRows }}>
  <WholeApp />
</AppProvider>

Move provider down to feature/page boundary.
Or move volatile state to external store with selectors.

const { events, publish, subscribe } = useAppContext();

Use explicit commands, workflow machine, or proper event emitter outside render with lifecycle-safe subscription.

const cache = new Map();
<CacheContext.Provider value={cache}>

cache.set(key, value);

Expose commands and subscription mechanism.
Do not expose writable mutable storage as public context contract.

UserContext
UserNameContext
UserEmailContext
UserAvatarContext

function App() {
  const store = createStore();

  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
}

function App() {
  const storeRef = useRef<Store | null>(null);

  if (storeRef.current === null) {
    storeRef.current = createStore();
  }

  return <StoreContext.Provider value={storeRef.current}>{children}</StoreContext.Provider>;
}

[ ] What exact value does this context pass?
[ ] Is it data, command, configuration, capability, or store reference?
[ ] Who owns the state behind it?
[ ] How often can it change?
[ ] How many consumers are expected?
[ ] Is provider placed at lowest valid boundary?
[ ] Is value identity stable when semantic value is unchanged?
[ ] Are state and actions split if needed?
[ ] Are unrelated domains mixed?
[ ] Are heavy consumers reading context directly?
[ ] Would a selector store be more appropriate?
[ ] Would URL/server cache/local state be more appropriate?
[ ] How will this be tested?
[ ] How will performance regression be detected?

AuthSessionContext
AuthCommandsContext
PermissionCapabilityContext
ThemeTokensContext
ModalCommandsContext
FormStoreContext
FieldRegistryContext
SelectionStoreContext

GlobalContext
AppContext
SharedContext
CommonContext
DataContext
EverythingProvider

- shared by a subtree,
- semantically scoped,
- relatively stable,
- small enough to reason about,
- not requiring selector-level subscription.

- high-frequency,
- large,
- partially observed,
- entity-based,
- server-owned,
- workflow-heavy,
- requiring debugging/middleware/subscriptions.

- passing one or two levels is clear,
- ownership should remain explicit,
- consumer count is small,
- no provider override is needed.

A regulatory case list page has:
- current user,
- permissions,
- route filters,
- server-loaded case list,
- selected rows,
- bulk action modal,
- toast notifications,
- theme,
- table column preferences.

<CaseListContext.Provider value={{
  user,
  permissions,
  filters,
  cases,
  selectedRows,
  modal,
  toasts,
  theme,
  columns,
}}>

AuthSessionContext          => current user/session, rare
PermissionCapabilityContext => can(action, resource), rare/stable
Route Search Params         => filters, browser source of truth
TanStack Query              => cases, server cache
SelectionStoreContext       => row selection, granular
ModalCommandsContext        => open/close modal, stable
ToastCommandsContext        => push toast, stable
ThemeContext                => theme, rare
ColumnPreferenceStore       => persistent user preference

Context change propagates to consumers.
Provider value identity matters.
Memoization fixes accidental identity churn, not bad architecture.
High fan-out × high frequency × heavy consumers is dangerous.
Provider placement is a performance decision.
Split state/actions when commands should be stable.
Split by domain, volatility, and read shape.
Use external store/cache for granular subscription and server state.
Use Profiler before and after refactor.

Use Context for scoped dependency passing.
Use stores/caches/machines when you need subscription, invalidation, or workflow semantics.