Patrones de React 18/19

// Server Component — default, async, sin "use client"
export default async function DashboardPage() {
  // Acceso directo a DB — no llega al cliente
  const deals = await db.deal.findMany({
    where: { status: "active" },
    orderBy: { updatedAt: "desc" },
  });

  return (
    <main>
      <PipelineHeader />       // Server
      <DealSearchBox />         // Client — "use client" interno
      <DealList deals={deals} />   // Server — props serializables
    </main>
  );
}

"use client";
import { useActionState } from "react";
import { createPipelineAction } from "@/actions/pipeline";

const initial = { error: null as string | null, success: false };

export function CreatePipelineForm() {
  const [state, formAction, pending] = useActionState(
    createPipelineAction, initial
  );

  return (
    <form action={formAction} aria-label="Crear pipeline">
      <fieldset disabled={pending}>
        <label htmlFor="name">Nombre del pipeline</label>
        <input id="name" name="name" required minLength={3} />

        <label htmlFor="currency">Moneda</label>
        <select id="currency" name="currency">
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
        </select>

        <button type="submit" aria-busy={pending}>
          {pending ? "Creando..." : "Crear pipeline"}
        </button>
      </fieldset>

      {state.error && (
        <p role="alert" aria-live="assertive">
          {state.error}
        </p>
      )}
      {state.success && (
        <p role="status">Pipeline creado correctamente ✓</p>
      )}
    </form>
  );
}

"use server";
import { PipelineSchema } from "@/lib/schemas";
import { db } from "@/lib/db";

export async function createPipelineAction(
  _prev: { error: string | null; success: boolean },
  formData: FormData
) {
  const parsed = PipelineSchema.safeParse(
    Object.fromEntries(formData)
  );
  if (!parsed.success)
    return { error: "Datos inválidos: " + parsed.error.flatten().fieldErrors, success: false };

  await db.pipeline.create({ data: parsed.data });
  revalidatePath("/dashboard");
  return { error: null, success: true };
}

"use client";
import { useOptimistic, useTransition } from "react";
import { moveDeal } from "@/actions/deal";
import type { Deal, Stage } from "@/types";

type Props = { deals: Deal[]; targetStage: Stage };

export function DealKanbanColumn({ deals, targetStage }: Props) {
  const [isPending, startTransition] = useTransition();

  // Estado optimista: reducer mueve el deal a la nueva etapa
  const [optimisticDeals, moveOptimistic] = useOptimistic(
    deals,
    (state: Deal[], { dealId, stage }: { dealId: string; stage: Stage }) =>
      state.map((d) => d.id === dealId ? { ...d, stage } : d)
  );

  function handleMove(dealId: string) {
    startTransition(async () => {
      moveOptimistic({ dealId, stage: targetStage }); // Actualización inmediata
      await moveDeal(dealId, targetStage);            // Revalida o revierte
    });
  }

  return (
    <ul aria-label={`Etapa: ${targetStage}`}>
      {optimisticDeals.map((deal) => (
        <li key={deal.id}>
          <span>{deal.name}</span>
          <button
            onClick={() => handleMove(deal.id)}
            disabled={isPending}
            aria-label={`Mover ${deal.name} a ${targetStage}`}
          >
            Mover →
          </button>
        </li>
      ))}
    </ul>
  );
}

import { useState, useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import type { DateRange, Stage, PipelineStats } from "@/types";
import { fetchPipelineStats } from "@/lib/api";

// Hook reutilizable de debounce — mismo patrón que react-patterns SKILL
function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);  // Cleanup obligatorio
  }, [value, delay]);
  return debounced;
}

export function usePipelineStats(
  query: string,
  { dateRange, stageFilter }: { dateRange: DateRange; stageFilter: Stage[] }
) {
  const debouncedQuery = useDebounce(query, 350);

  const { data, isLoading, error } = useQuery<PipelineStats>({
    queryKey: ["pipeline-stats", debouncedQuery, dateRange, stageFilter],
    queryFn: () => fetchPipelineStats({ query: debouncedQuery, dateRange, stageFilter }),
    enabled: debouncedQuery.length > 0 || stageFilter.length > 0,
    staleTime: 1000 * 30,  // 30s de cache antes de revalidar
  });

  return { data, isLoading, error, debouncedQuery };
}

import { ErrorBoundary } from "react-error-boundary";
import { Suspense } from "react";

export default function ReportsLayout({
  children
}: { children: React.ReactNode }) {
  return (
    <section aria-labelledby="reports-heading">
      <h1 id="reports-heading">Reportes de Pipeline</h1>

      /* Cada bloque de datos tiene su propio boundary */
      <ErrorBoundary
        fallback=<ChartErrorView />
        onError={(err) => captureException(err)}
      >
        <Suspense fallback=<RevenueChartSkeleton />>
          <RevenueChart />
        </Suspense>
      </ErrorBoundary>

      <ErrorBoundary fallback=<TableErrorView />>
        <Suspense fallback=<DealsTableSkeleton />>
          {children}
        </Suspense>
      </ErrorBoundary>
    </section>
  );
}

// Patrón compound: estado compartido via Context, API limpia
<StageSelector defaultValue="prospecting">
  <StageSelector.List aria-label="Seleccionar etapa del pipeline">
    <StageSelector.Option value="prospecting">Prospección</StageSelector.Option>
    <StageSelector.Option value="qualified">Calificado</StageSelector.Option>
    <StageSelector.Option value="proposal">Propuesta</StageSelector.Option>
    <StageSelector.Option value="closed">Cerrado</StageSelector.Option>
  </StageSelector.List>
</StageSelector>