React Hooks Guía Avanzada en Español

# React Hooks Guía Avanzada

Aprende a dominar los React Hooks avanzados para construir aplicaciones eficientes y mantenibles.

## Hooks Fundamentales

### useState con Tipos

```typescript
// Definir estado con TypeScript
import { useState } from "react";

interface Usuario {
  id: number;
  nombre: string;
  email: string;
  activo: boolean;
}

function PerfilUsuario() {
  const [usuario, setUsuario] = useState<Usuario | null>(null);
  const [cargando, setCargando] = useState(true);
  const [errores, setErrores] = useState<string[]>([]);

  const actualizarNombre = (nuevoNombre: string) => {
    setUsuario((prev) => 
      prev ? { ...prev, nombre: nuevoNombre } : null
    );
  };

  return (
    <div>
      {cargando ? (
        <p>Cargando perfil...</p>
      ) : usuario ? (
        <h1>Bienvenido, {usuario.nombre}</h1>
      ) : (
        <p>Usuario no encontrado</p>
      )}
    </div>
  );
}
```

## useReducer para Estado Complejo

```typescript
// reducers/carrito.ts
interface Producto {
  id: string;
  nombre: string;
  precio: number;
  cantidad: number;
}

interface EstadoCarrito {
  productos: Producto[];
  total: number;
  cantidadTotal: number;
}

type AccionCarrito =
  | { tipo: "AGREGAR_PRODUCTO"; payload: Producto }
  | { tipo: "ELIMINAR_PRODUCTO"; payload: string }
  | { tipo: "ACTUALIZAR_CANTIDAD"; payload: { id: string; cantidad: number } }
  | { tipo: "VACIAR_CARRITO" };

function reductorCarrito(
  estado: EstadoCarrito,
  accion: AccionCarrito
): EstadoCarrito {
  switch (accion.tipo) {
    case "AGREGAR_PRODUCTO": {
      const existente = estado.productos.find(
        (p) => p.id === accion.payload.id
      );

      if (existente) {
        const productosActualizados = estado.productos.map((p) =>
          p.id === accion.payload.id
            ? { ...p, cantidad: p.cantidad + 1 }
            : p
        );
        return calcularTotales({ ...estado, productos: productosActualizados });
      }

      return calcularTotales({
        ...estado,
        productos: [...estado.productos, { ...accion.payload, cantidad: 1 }],
      });
    }

    case "ELIMINAR_PRODUCTO": {
      const productosFiltrados = estado.productos.filter(
        (p) => p.id !== accion.payload
      );
      return calcularTotales({ ...estado, productos: productosFiltrados });
    }

    case "VACIAR_CARRITO":
      return { productos: [], total: 0, cantidadTotal: 0 };

    default:
      return estado;
  }
}

function calcularTotales(estado: EstadoCarrito): EstadoCarrito {
  const total = estado.productos.reduce(
    (sum, p) => sum + p.precio * p.cantidad,
    0
  );
  const cantidadTotal = estado.productos.reduce(
    (sum, p) => sum + p.cantidad,
    0
  );
  return { ...estado, total, cantidadTotal };
}
```

### Componente con useReducer

```typescript
// components/Carrito.tsx
"use client";

import { useReducer } from "react";

export function ProveedorCarrito({ children }: { children: React.ReactNode }) {
  const [estado, despachar] = useReducer(reductorCarrito, {
    productos: [],
    total: 0,
    cantidadTotal: 0,
  });

  const agregarAlCarrito = (producto: Producto) => {
    despachar({ tipo: "AGREGAR_PRODUCTO", payload: producto });
  };

  const eliminarDelCarrito = (id: string) => {
    despachar({ tipo: "ELIMINAR_PRODUCTO", payload: id });
  };

  return (
    <ContextoCarrito.Provider
      value={{ estado, agregarAlCarrito, eliminarDelCarrito }}
    >
      {children}
    </ContextoCarrito.Provider>
  );
}
```

## Hooks Personalizados

### useLocalStorage

```typescript
// hooks/useLocalStorage.ts
import { useState, useEffect } from "react";

export function useLocalStorage<T>(
  clave: string,
  valorInicial: T
): [T, (valor: T | ((prev: T) => T)) => void] {
  const [valorAlmacenado, setValorAlmacenado] = useState<T>(() => {
    if (typeof window === "undefined") return valorInicial;

    try {
      const elemento = window.localStorage.getItem(clave);
      return elemento ? JSON.parse(elemento) : valorInicial;
    } catch (error) {
      console.error("Error al leer localStorage:", error);
      return valorInicial;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(clave, JSON.stringify(valorAlmacenado));
    } catch (error) {
      console.error("Error al escribir en localStorage:", error);
    }
  }, [clave, valorAlmacenado]);

  return [valorAlmacenado, setValorAlmacenado];
}

// Uso
function Configuracion() {
  const [tema, setTema] = useLocalStorage("tema", "claro");
  const [idioma, setIdioma] = useLocalStorage("idioma", "es");

  return (
    <div>
      <button onClick={() => setTema(tema === "claro" ? "oscuro" : "claro")}>
        Tema actual: {tema}
      </button>
    </div>
  );
}
```

### useFetch con Caché

```typescript
// hooks/useFetch.ts
import { useState, useEffect, useCallback } from "react";

interface EstadoFetch<T> {
  datos: T | null;
  cargando: boolean;
  error: Error | null;
}

const cache = new Map<string, unknown>();

export function useFetch<T>(url: string, opciones?: RequestInit) {
  const [estado, setEstado] = useState<EstadoFetch<T>>({
    datos: null,
    cargando: true,
    error: null,
  });

  const ejecutarFetch = useCallback(async () => {
    // Verificar caché
    if (cache.has(url)) {
      setEstado({
        datos: cache.get(url) as T,
        cargando: false,
        error: null,
      });
      return;
    }

    setEstado((prev) => ({ ...prev, cargando: true }));

    try {
      const respuesta = await fetch(url, opciones);
      if (!respuesta.ok) {
        throw new Error(`Error HTTP: ${respuesta.status}`);
      }
      const datos = await respuesta.json();
      cache.set(url, datos);
      setEstado({ datos, cargando: false, error: null });
    } catch (error) {
      setEstado({
        datos: null,
        cargando: false,
        error: error as Error,
      });
    }
  }, [url, opciones]);

  useEffect(() => {
    ejecutarFetch();
  }, [ejecutarFetch]);

  const recargar = () => {
    cache.delete(url);
    ejecutarFetch();
  };

  return { ...estado, recargar };
}
```

## Optimización con useMemo y useCallback

```typescript
// components/ListaProductos.tsx
import { useMemo, useCallback, memo } from "react";

interface Producto {
  id: string;
  nombre: string;
  precio: number;
  categoria: string;
}

interface Props {
  productos: Producto[];
  categoriaSeleccionada: string;
  onSeleccionar: (id: string) => void;
}

export function ListaProductos({
  productos,
  categoriaSeleccionada,
  onSeleccionar,
}: Props) {
  // Memorizar productos filtrados
  const productosFiltrados = useMemo(() => {
    console.log("Filtrando productos...");
    return productos.filter(
      (p) => !categoriaSeleccionada || p.categoria === categoriaSeleccionada
    );
  }, [productos, categoriaSeleccionada]);

  // Memorizar función de click
  const manejarClick = useCallback(
    (id: string) => {
      onSeleccionar(id);
    },
    [onSeleccionar]
  );

  return (
    <ul className="grid grid-cols-3 gap-4">
      {productosFiltrados.map((producto) => (
        <TarjetaProducto
          key={producto.id}
          producto={producto}
          onClick={manejarClick}
        />
      ))}
    </ul>
  );
}

// Componente memorizado para evitar re-renders
const TarjetaProducto = memo(function TarjetaProducto({
  producto,
  onClick,
}: {
  producto: Producto;
  onClick: (id: string) => void;
}) {
  return (
    <li
      onClick={() => onClick(producto.id)}
      className="p-4 border rounded-lg cursor-pointer hover:shadow-lg"
    >
      <h3 className="font-bold">{producto.nombre}</h3>
      <p className="text-blue-600">${producto.precio}</p>
    </li>
  );
});
```

Esta guía de React Hooks en español cubre todos los hooks esenciales con ejemplos prácticos y patrones de optimización.