Context Sin Tormentas

// Divide: contexto de estado + contexto de dispatch (o contexto solo de acciones)
import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
 
type Theme = "light" | "dark";
 
const ThemeStateContext = createContext<Theme>("light");
const ThemeActionsContext = createContext<{ toggle: () => void } | null>(null);
 
export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light");
  const toggle = useCallback(() => setTheme((t) => (t === "light" ? "dark" : "light")), []);
  const actions = useMemo(() => ({ toggle }), [toggle]);
 
  return (
    <ThemeStateContext.Provider value={theme}>
      <ThemeActionsContext.Provider value={actions}>{children}</ThemeActionsContext.Provider>
    </ThemeStateContext.Provider>
  );
}
 
export function useTheme() {
  return useContext(ThemeStateContext);
}
 
export function useThemeActions() {
  const ctx = useContext(ThemeActionsContext);
  if (!ctx) throw new Error("useThemeActions must be used within ThemeProvider");
  return ctx;
}

// session/SessionProvider.tsx - divide estado vs acciones; valor memoizado
import {
  createContext,
  useCallback,
  useContext,
  useMemo,
  useState,
  type ReactNode,
} from "react";
 
type User = { id: string; displayName: string };
 
type SessionState = {
  user: User | null;
  status: "loading" | "authenticated" | "anonymous";
};
 
type SessionActions = {
  signIn: (user: User) => void;
  signOut: () => void;
};
 
const SessionStateContext = createContext<SessionState | null>(null);
const SessionActionsContext = createContext<SessionActions | null>(null);
 
export function SessionProvider({ children }: { children: ReactNode }) {
  const [state, setState] = useState<SessionState>({ user: null, status: "loading" });
 
  const signIn = useCallback((user: User) => {
    setState({ user, status: "authenticated" });
  }, []);
 
  const signOut = useCallback(() => {
    setState({ user: null, status: "anonymous" });
  }, []);
 
  const actions = useMemo(() => ({ signIn, signOut }), [signIn, signOut]);
 
  return (
    <SessionStateContext.Provider value={state}>
      <SessionActionsContext.Provider value={actions}>{children}</SessionActionsContext.Provider>
    </SessionStateContext.Provider>
  );
}
 
export function useSessionState() {
  const ctx = useContext(SessionStateContext);
  if (!ctx) throw new Error("useSessionState requires SessionProvider");
  return ctx;
}
 
export function useSessionActions() {
  const ctx = useContext(SessionActionsContext);
  if (!ctx) throw new Error("useSessionActions requires SessionProvider");
  return ctx;
}
 
// --- Consumidor: el encabezado solo necesita displayName ---
import { Text, View } from "react-native";
 
export function HeaderGreeting() {
  const { user, status } = useSessionState();
  if (status === "loading") return <Text>…</Text>;
  return <Text>Hola, {user?.displayName ?? "Invitado"}</Text>;
}
 
// --- Consumidor: configuración solo necesita signOut - NO re-renderiza cuando displayName cambia
// si solo importas useSessionActions y nunca useSessionState
import { Pressable } from "react-native";
 
export function SignOutButton() {
  const { signOut } = useSessionActions();
  return (
    <Pressable onPress={signOut}>
      <Text>Cerrar sesión</Text>
    </Pressable>
  );
}

// Patrón de hook selector sin biblioteca extra - suscribirse a un campo
import { useRef, useSyncExternalStore } from "react";
 
function useSessionSelector<T>(selector: (state: SessionState) => T): T {
  const state = useSessionState();
  const selectorRef = useRef(selector);
  selectorRef.current = selector;
 
  return useSyncExternalStore(
    () => () => {},
    () => selectorRef.current(state),
    () => selectorRef.current(state)
  );
}
 
// Uso: solo re-renderiza cuando user.id cambia (optimización manual - Zustand lo hace de forma nativa)
export function UserIdLabel() {
  const userId = useSessionSelector((s) => s.user?.id ?? "anon");
  return <Text>ID: {userId}</Text>;
}

// - Nuevo objeto en cada renderizado - todos los consumidores re-renderizados
<AppContext.Provider value={{ user, cart, theme, setTheme }}>

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

npx expo install use-context-selector

import { createContext, useContextSelector } from "use-context-selector";
 
const SessionContext = createContext<SessionState>({ user: null, status: "anonymous" });
 
export function useUserId() {
  return useContextSelector(SessionContext, (s) => s.user?.id);
}