Estado del cliente: hooks personalizados y contexto

El contexto es útil cuando varias partes de una interfaz necesitan el mismo carrito, pero no convierte cada dato en estado global. Guarda las líneas mínimas y calcula el subtotal a partir de ellas. Un hook personalizado puede ocultar la forma de acceso sin ocultar la regla matemática.

Ejemplo resuelto

const lineas = [{ precio: 4, cantidad: 2 }, { precio: 7, cantidad: 1 }];
const subtotal = lineas.reduce((suma, linea) => suma + linea.precio * linea.cantidad, 0);

El subtotal es 15, no un segundo estado que podría quedar desactualizado.

Un proveedor de cliente puede exponer el estado sin duplicar el subtotal:

'use client';
import { createContext, useContext, useState, type ReactNode } from 'react';
type Linea = { id: string; precio: number; cantidad: number };
const Contexto = createContext<{ lineas: Linea[]; agregar: (l: Linea) => void } | null>(null);
export function CarritoProvider({ children }: { children: ReactNode }) {
  const [lineas, setLineas] = useState<Linea[]>([]);
  return <Contexto.Provider value={{ lineas, agregar: l => setLineas(actual => [...actual, l]) }}>
    {children}
  </Contexto.Provider>;
}
export function useCarrito() {
  const estado = useContext(Contexto);
  if (!estado) throw new Error('Falta CarritoProvider');
  const subtotal = estado.lineas.reduce((s, l) => s + l.precio * l.cantidad, 0);
  return { ...estado, subtotal };
}

Monta el proveedor una vez alrededor de los consumidores y usa IDs distintos en este ejercicio. Para añadir el mismo producto, define primero si incrementarás su cantidad o rechazarás el duplicado.

Pruébalo

1. Define el contexto con una lista vacía inicial.

2. Añade una línea de precio 4 y cantidad 2.

3. Añade otra de precio 7 y cantidad 1.

4. Expón un hook para leer líneas y subtotal.

Comprueba tu resultado

Error frecuente: guardar subtotal y actualizarlo en varios manejadores. Corrección: deriva el valor de las líneas actuales.

Ejercicio: añade una tercera línea de precio 3 y cantidad 3; el subtotal esperado es 24, porque 4×2 + 7×1 + 3×3 = 24, y eliminarla debe devolver 15.