Rendimiento en la gestión de estado — selectores de Zustand, división de context, y estado derivado

// Zustand con selectores — los componentes solo re-renderizarán cuando su slice cambie
import { create } from "zustand";
 
interface AppStore {
  user: { name: string; role: string } | null;
  cart: CartItem[];
  notifications: Notification[];
  addToCart: (item: CartItem) => void;
  clearNotifications: () => void;
}
 
const useAppStore = create<AppStore>((set) => ({
  user: null,
  cart: [],
  notifications: [],
  addToCart: (item) => set((s) => ({ cart: [...s.cart, item] })),
  clearNotifications: () => set({ notifications: [] }),
}));
 
// BUENO: Selector — solo re-renderiza cuando cart cambia
function CartBadge() {
  const cartCount = useAppStore((s) => s.cart.length);
  return <span>{cartCount}</span>;
}
 
// MALO: Sin selector — re-renderiza en CUALQUIER cambio del almacén
function CartBadgeBad() {
  const store = useAppStore();  // ¡Se suscribe a todo el almacén!
  return <span>{store.cart.length}</span>;
}

// ---- ANTES: Suscripción a almacén completo — 47 re-renderizados innecesarios por interacción ----
 
import { create } from "zustand";
 
interface DashboardStore {
  user: { name: string; avatar: string; role: string };
  theme: "light" | "dark";
  sidebarOpen: boolean;
  notifications: Notification[];
  activeTab: string;
  searchQuery: string;
  filters: Record<string, string>;
  cart: CartItem[];
  setSidebarOpen: (open: boolean) => void;
  setActiveTab: (tab: string) => void;
  setSearchQuery: (query: string) => void;
  addNotification: (n: Notification) => void;
  addToCart: (item: CartItem) => void;
}
 
const useDashboardStore = create<DashboardStore>((set) => ({
  user: { name: "Alice", avatar: "/alice.jpg", role: "admin" },
  theme: "light",
  sidebarOpen: true,
  notifications: [],
  activeTab: "overview",
  searchQuery: "",
  filters: {},
  cart: [],
  setSidebarOpen: (open) => set({ sidebarOpen: open }),
  setActiveTab: (tab) => set({ activeTab: tab }),
  setSearchQuery: (query) => set({ searchQuery: query }),
  addNotification: (n) => set((s) => ({ notifications: [...s.notifications, n] })),
  addToCart: (item) => set((s) => ({ cart: [...s.cart, item] })),
}));
 
// Cada componente se suscribe al almacén completo
function Header() {
  const store = useDashboardStore(); // Re-renderiza al cambiar sidebar, búsqueda, pestaña, etc.
  return <header>{store.user.name} ({store.notifications.length})</header>;
}
 
function Sidebar() {
  const store = useDashboardStore(); // Re-renderiza en búsqueda, notificaciones, carrito, etc.
  return <nav className={store.sidebarOpen ? "w-64" : "w-16"}>{/* ... */}</nav>;
}
 
function SearchBar() {
  const store = useDashboardStore(); // Re-renderiza en sidebar, notificaciones, carrito, etc.
  return (
    <input
      value={store.searchQuery}
      onChange={(e) => store.setSearchQuery(e.target.value)}
    />
  );
}
 
function TabPanel() {
  const store = useDashboardStore(); // Re-renderiza en todo
  return <div>Active: {store.activeTab}</div>;
}
 
function CartIcon() {
  const store = useDashboardStore(); // Re-renderiza en todo
  return <span>Cart: {store.cart.length}</span>;
}
 
// Escribir en SearchBar re-renderiza todos los 5 componentes = 47 re-renderizados para 10 pulsaciones
 
// ---- DESPUÉS: Selectores — cada componente se re-renderiza solo para sus propios datos ----
 
// Misma definición de almacén, pero con selectores
 
function Header() {
  const userName = useDashboardStore((s) => s.user.name);
  const notificationCount = useDashboardStore((s) => s.notifications.length);
  // Solo re-renderiza cuando user.name o notifications.length cambia
  return <header>{userName} ({notificationCount})</header>;
}
 
function Sidebar() {
  const sidebarOpen = useDashboardStore((s) => s.sidebarOpen);
  const setSidebarOpen = useDashboardStore((s) => s.setSidebarOpen);
  // Solo re-renderiza cuando sidebarOpen cambia
  return (
    <nav className={sidebarOpen ? "w-64" : "w-16"}>
      <button onClick={() => setSidebarOpen(!sidebarOpen)}>Toggle</button>
    </nav>
  );
}
 
function SearchBar() {
  const searchQuery = useDashboardStore((s) => s.searchQuery);
  const setSearchQuery = useDashboardStore((s) => s.setSearchQuery);
  // Solo re-renderiza cuando searchQuery cambia
  return (
    <input
      value={searchQuery}
      onChange={(e) => setSearchQuery(e.target.value)}
    />
  );
}
 
function TabPanel() {
  const activeTab = useDashboardStore((s) => s.activeTab);
  // Solo re-renderiza cuando activeTab cambia
  return <div>Active: {activeTab}</div>;
}
 
function CartIcon() {
  const cartCount = useDashboardStore((s) => s.cart.length);
  // Solo re-renderiza cuando cart.length cambia
  return <span>Cart: {cartCount}</span>;
}
 
// Escribir en SearchBar re-renderiza SOLO SearchBar = 10 re-renderizados para 10 pulsaciones
// Reducción: de 47 re-renderizados a 10 (79% menos)

// ANTES: Context único — todos los consumidores se re-renderizarán en cualquier cambio
const AppContext = createContext<{
  state: AppState;
  dispatch: Dispatch<Action>;
} | null>(null);
 
// DESPUÉS: Contexts divididos — los consumidores de dispatch nunca se re-renderizarán en cambios de estado
const StateContext = createContext<AppState | null>(null);
const DispatchContext = createContext<Dispatch<Action> | null>(null);
 
function AppProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(reducer, initialState);
 
  return (
    <DispatchContext.Provider value={dispatch}>
      <StateContext.Provider value={state}>{children}</StateContext.Provider>
    </DispatchContext.Provider>
  );
}
 
// Este componente solo hace dispatch — nunca se re-renderiza en cambios de estado
function AddButton() {
  const dispatch = useContext(DispatchContext)!;
  return <button onClick={() => dispatch({ type: "ADD" })}>Add</button>;
}
 
// Este componente solo lee count — se re-renderiza solo cuando count cambia
// (aún se re-renderiza en CUALQUIER cambio de estado — usa useMemo para mayor optimización)
function Counter() {
  const state = useContext(StateContext)!;
  return <span>{state.count}</span>;
}

// MALO: Almacenar estado derivado — debe mantener filteredProducts sincronizado
const [products, setProducts] = useState<Product[]>([]);
const [filter, setFilter] = useState("all");
const [filteredProducts, setFilteredProducts] = useState<Product[]>([]);
 
useEffect(() => {
  setFilteredProducts(products.filter((p) => filter === "all" || p.category === filter));
}, [products, filter]);
 
// BUENO: Calcular en el renderizado — siempre sincronizado, sin effect necesario
const [products, setProducts] = useState<Product[]>([]);
const [filter, setFilter] = useState("all");
 
const filteredProducts = useMemo(
  () => products.filter((p) => filter === "all" || p.category === filter),
  [products, filter]
);

"use client";
 
import { useSearchParams, useRouter, usePathname } from "next/navigation";
 
function ProductFilters() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();
 
  const category = searchParams.get("category") || "all";
  const sort = searchParams.get("sort") || "name";
  const page = parseInt(searchParams.get("page") || "1");
 
  function updateParam(key: string, value: string) {
    const params = new URLSearchParams(searchParams);
    params.set(key, value);
    params.set("page", "1"); // Reinicia página al cambiar filtro
    router.push(`${pathname}?${params.toString()}`);
  }
 
  return (
    <div className="flex gap-4">
      <select value={category} onChange={(e) => updateParam("category", e.target.value)}>
        <option value="all">All</option>
        <option value="electronics">Electronics</option>
      </select>
      <select value={sort} onChange={(e) => updateParam("sort", e.target.value)}>
        <option value="name">Name</option>
        <option value="price">Price</option>
      </select>
    </div>
  );
}