Renderizado condicional

// Ternario — elige entre dos elementos
{isLoggedIn ? <Dashboard /> : <LoginForm />}
 
// AND lógico — muestra o nada
{hasNotifications && <Badge count={notifications.length} />}
 
// Retorno temprano — sal de todo el componente
if (!user) return <Skeleton />;
return <Profile user={user} />;
 
// Variable extraída — legible cuando la lógica es compleja
const content = status === "loading"
  ? <Spinner />
  : status === "error"
  ? <ErrorMessage />
  : <DataTable rows={data} />;
 
return <section>{content}</section>;

"use client";
 
import { useState } from "react";
 
type Status = "idle" | "loading" | "success" | "error";
 
interface FetchResult {
  status: Status;
  data?: string[];
  error?: string;
}
 
export function FetchDemo() {
  const [result, setResult] = useState<FetchResult>({ status: "idle" });
 
  async function handleFetch() {
    setResult({ status: "loading" });
    try {
      // Simula una petición de red
      await new Promise(resolve => setTimeout(resolve, 1000));
      const success = Math.random() > 0.3;
      if (!success) throw new Error("Network timeout");
      setResult({
        status: "success",
        data: ["React", "Next.js", "TypeScript"],
      });
    } catch (err) {
      setResult({
        status: "error",
        error: err instanceof Error ? err.message : "Unknown error",
      });
    }
  }
 
  return (
    <div className="max-w-sm space-y-4 rounded border p-4">
      <button
        onClick={handleFetch}
        disabled={result.status === "loading"}
        className="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
      >
        {result.status === "loading" ? "Cargando..." : "Obtener datos"}
      </button>
 
      {result.status === "idle" && (
        <p className="text-gray-500">Pulsa el botón para cargar los datos.</p>
      )}
 
      {result.status === "loading" && (
        <div className="animate-pulse rounded bg-gray-200 p-4">Cargando...</div>
      )}
 
      {result.status === "error" && (
        <div className="rounded bg-red-50 p-3 text-red-700">
          <strong>Error:</strong> {result.error}
        </div>
      )}
 
      {result.status === "success" && result.data && (
        <ul className="list-inside list-disc">
          {result.data.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

const statusUI: Record<Status, React.ReactNode> = {
  idle: <p>Waiting...</p>,
  loading: <Spinner />,
  success: <DataTable />,
  error: <ErrorBanner />,
};
 
return <div>{statusUI[status]}</div>;

// Las uniones discriminadas hacen que el renderizado condicional sea seguro en tipos
type Result =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string[] }
  | { status: "error"; error: string };
 
function Display({ result }: { result: Result }) {
  switch (result.status) {
    case "idle":
      return <p>Ready</p>;
    case "loading":
      return <Spinner />;
    case "success":
      // result.data se acota a string[] aquí
      return <List items={result.data} />;
    case "error":
      // result.error se acota a string aquí
      return <Alert message={result.error} />;
  }
}

// Ejemplo de producción: visualización de banners con múltiples cláusulas de guarda
// Archivo: src/components/banner/banner-display.tsx
export default function BannerDisplay({ location, className }: BannerDisplayProps) {
  const { banners, loading, error, fetchBanners } = useBannerStore();
  const locationBanners = banners[location] || [];
 
  useEffect(() => {
    fetchBanners(location);
  }, [location]);
 
  // Cláusula de guarda 1: cargando sin datos en caché
  if (loading && locationBanners.length === 0) {
    return null;
  }
 
  // Cláusula de guarda 2: estado de error
  if (error) {
    return null;
  }
 
  // Cláusula de guarda 3: no hay banners para esta ubicación
  if (locationBanners.length === 0) {
    return null;
  }
 
  // Camino feliz: renderiza los banners
  return (
    <div className={cn('space-y-4', className)}>
      {locationBanners.map((banner) => (
        <div
          key={banner.id}
          className={cn(
            'rounded-md py-2 px-4 shadow-sm',
            getBorderClass(banner.borderStyle),
            'bg-zinc-50 dark:bg-zinc-900',
            banner.customStyles
          )}
        >
          {banner.content}
        </div>
      ))}
    </div>
  );
}