Patrones de Context - Divide, limita y optimiza React context para evitar re-renderizados innecesarios

import { createContext, use, useState, useCallback, type ReactNode } from "react";
 
// Divide context: separa estado de dispatch
const CountStateContext = createContext<number>(0);
const CountDispatchContext = createContext<{
  increment: () => void;
  decrement: () => void;
} | null>(null);
 
function CountProvider({ children }: { children: ReactNode }) {
  const [count, setCount] = useState(0);
  const dispatch = useMemo(() => ({
    increment: () => setCount((c) => c + 1),
    decrement: () => setCount((c) => c - 1),
  }), []);
 
  return (
    <CountStateContext value={count}>
      <CountDispatchContext value={dispatch}>
        {children}
      </CountDispatchContext>
    </CountStateContext>
  );
}

import {
  createContext,
  use,
  useState,
  useMemo,
  useCallback,
  memo,
  type ReactNode,
} from "react";
 
// --- Divide context: estado de Tema vs acciones ---
 
interface ThemeState {
  mode: "light" | "dark";
  accentColor: string;
  fontSize: number;
}
 
interface ThemeActions {
  toggleMode: () => void;
  setAccentColor: (color: string) => void;
  setFontSize: (size: number) => void;
}
 
const ThemeStateContext = createContext<ThemeState>({
  mode: "light",
  accentColor: "#3b82f6",
  fontSize: 16,
});
 
const ThemeActionsContext = createContext<ThemeActions | null>(null);
 
function ThemeProvider({ children }: { children: ReactNode }) {
  const [state, setState] = useState<ThemeState>({
    mode: "light",
    accentColor: "#3b82f6",
    fontSize: 16,
  });
 
  // Objeto de acciones estable - nunca causa re-renderizados en consumidores solo de acciones
  const actions = useMemo<ThemeActions>(
    () => ({
      toggleMode: () =>
        setState((s) => ({
          ...s,
          mode: s.mode === "light" ? "dark" : "light",
        })),
      setAccentColor: (color) =>
        setState((s) => ({ ...s, accentColor: color })),
      setFontSize: (size) =>
        setState((s) => ({ ...s, fontSize: size })),
    }),
    []
  );
 
  return (
    <ThemeStateContext value={state}>
      <ThemeActionsContext value={actions}>
        {children}
      </ThemeActionsContext>
    </ThemeStateContext>
  );
}
 
// Hooks personalizados con comprobaciones de seguridad
function useThemeState() {
  return use(ThemeStateContext);
}
 
function useThemeActions() {
  const actions = use(ThemeActionsContext);
  if (!actions) throw new Error("useThemeActions debe estar dentro de ThemeProvider");
  return actions;
}
 
// --- Componentes demostrando consumo selectivo ---
 
// Solo re-renderiza cuando cambia el estado del tema
const ThemeIndicator = memo(function ThemeIndicator() {
  const { mode, accentColor } = useThemeState();
  console.log("ThemeIndicator renderizado");
  return (
    <div className="flex items-center gap-2">
      <div
        className="w-4 h-4 rounded-full"
        style={{ backgroundColor: accentColor }}
      />
      <span>{mode} mode</span>
    </div>
  );
});
 
// Solo re-renderiza cuando cambia el contexto de acciones (nunca, porque está memoizado)
const ThemeToggleButton = memo(function ThemeToggleButton() {
  const { toggleMode } = useThemeActions();
  console.log("ThemeToggleButton renderizado");
  return (
    <button onClick={toggleMode} className="px-3 py-1 border rounded">
      Toggle Theme
    </button>
  );
});
 
// --- Patrón de context limitado en alcance ---
 
interface NotificationContextValue {
  notifications: Notification[];
  add: (message: string) => void;
  dismiss: (id: string) => void;
}
 
const NotificationContext = createContext<NotificationContextValue | null>(null);
 
function useNotifications() {
  const ctx = use(NotificationContext);
  if (!ctx) throw new Error("useNotifications debe estar dentro de NotificationProvider");
  return ctx;
}
 
interface Notification {
  id: string;
  message: string;
}
 
function NotificationProvider({ children }: { children: ReactNode }) {
  const [notifications, setNotifications] = useState<Notification[]>([]);
 
  const add = useCallback((message: string) => {
    const id = crypto.randomUUID();
    setNotifications((prev) => [...prev, { id, message }]);
    setTimeout(() => {
      setNotifications((prev) => prev.filter((n) => n.id !== id));
    }, 5000);
  }, []);
 
  const dismiss = useCallback((id: string) => {
    setNotifications((prev) => prev.filter((n) => n.id !== id));
  }, []);
 
  const value = useMemo(
    () => ({ notifications, add, dismiss }),
    [notifications, add, dismiss]
  );
 
  return (
    <NotificationContext value={value}>
      {children}
    </NotificationContext>
  );
}
 
// --- Diseño de aplicación completa ---
function App() {
  return (
    <ThemeProvider>
      <NotificationProvider>
        <header className="flex justify-between p-4 border-b">
          <ThemeIndicator />
          <ThemeToggleButton />
        </header>
        <main className="p-6">
          <ContentArea />
        </main>
      </NotificationProvider>
    </ThemeProvider>
  );
}

import { useSyncExternalStore } from "react";
 
// Usa useSyncExternalStore para lecturas basadas en selectores
function useStoreSelector<T, S>(store: Store<T>, selector: (state: T) => S): S {
  return useSyncExternalStore(
    store.subscribe,
    () => selector(store.getSnapshot()),
    () => selector(store.getServerSnapshot())
  );
}
 
// Solo re-renderiza cuando `user.name` cambia
function UserName() {
  const name = useStoreSelector(appStore, (s) => s.user.name);
  return <span>{name}</span>;
}

const TodoDispatchContext = createContext<React.Dispatch<TodoAction> | null>(null);
const TodoStateContext = createContext<TodoState>({ items: [] });
 
function TodoProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(todoReducer, { items: [] });
 
  return (
    <TodoStateContext value={state}>
      <TodoDispatchContext value={dispatch}>
        {children}
      </TodoDispatchContext>
    </TodoStateContext>
  );
}