Performance web y Core Web Vitals

import { memo, useCallback, useState } from "react";

// Un héroe del roster del Team Builder.
interface Heroe {
  id: number;
  nombre: string;
  rol: string;
}

// El roster es constante y vive FUERA del componente: su referencia no cambia entre renders.
const ROSTER: Heroe[] = [
  { id: 1, nombre: "Tracer", rol: "Daño" },
  { id: 2, nombre: "Mercy", rol: "Apoyo" },
  { id: 3, nombre: "Reinhardt", rol: "Tanque" },
  { id: 4, nombre: "Ana", rol: "Apoyo" },
  { id: 5, nombre: "Genji", rol: "Daño" },
  { id: 6, nombre: "Sigma", rol: "Tanque" },
];

// Medidor didáctico: cuántas veces se ha renderizado cada tarjeta.
const renders: Record<number, number> = {};

// La tarjeta, ahora envuelta en memo: solo se re-renderiza si sus props cambian
// (comparación superficial por referencia). Para que memo sirva de algo, sus props
// tienen que ser referencialmente estables entre renders.
const TarjetaHeroe = memo(function TarjetaHeroe({
  heroe,
  onAñadir,
}: {
  heroe: Heroe;
  onAñadir: (h: Heroe) => void;
}) {
  // Suma uno al medidor de ESTA tarjeta cada vez que se renderiza.
  renders[heroe.id] = (renders[heroe.id] || 0) + 1;
  return (
    <article className="tarjeta">
      <h3 className="tarjeta__nombre">{heroe.nombre}</h3>
      <p className="tarjeta__rol">{heroe.rol}</p>
      <p className="tarjeta__renders">renders: {renders[heroe.id]}</p>
      <button className="boton" onClick={() => onAñadir(heroe)}>
        Añadir
      </button>
    </article>
  );
});

export default function App() {
  // Texto del filtro: cambia con cada tecla, así que el padre se re-renderiza al teclear.
  const [filtro, setFiltro] = useState("");
  // El equipo que va eligiendo el usuario.
  const [equipo, setEquipo] = useState<Heroe[]>([]);

  // Filtrar 6 héroes es barato: se recalcula en cada render, sin memoizar.
  const visibles = ROSTER.filter((heroe) =>
    heroe.nombre.toLowerCase().includes(filtro.toLowerCase()),
  );

  // useCallback con [] devuelve SIEMPRE la misma referencia de función entre renders.
  // Sin esto, onAñadir sería una función nueva cada vez y memo no podría saltarse
  // ningún re-render: la tarjeta vería una prop "nueva" en cada tecla del filtro.
  const añadir = useCallback((heroe: Heroe) => {
    setEquipo((actual) =>
      actual.some((h) => h.id === heroe.id) ? actual : [...actual, heroe],
    );
  }, []);

  return (
    <section>
      <h1 className="titulo">
        Roster ({visibles.length}) · equipo: {equipo.length}
      </h1>
      <input
        className="filtro"
        placeholder="Filtra por nombre…"
        value={filtro}
        onChange={(evento) => setFiltro(evento.target.value)}
      />
      <div className="lista">
        {visibles.map((heroe) => (
          // key estable (el id del héroe), nunca el índice del map.
          <TarjetaHeroe key={heroe.id} heroe={heroe} onAñadir={añadir} />
        ))}
      </div>
    </section>
  );
}

import { memo, useCallback, useState } from "react";

// Un héroe del roster del Team Builder.
interface Heroe {
  id: number;
  nombre: string;
  rol: string;
}

// El roster es constante y vive FUERA del componente: su referencia no cambia entre renders.
const ROSTER: Heroe[] = [
  { id: 1, nombre: "Tracer", rol: "Daño" },
  { id: 2, nombre: "Mercy", rol: "Apoyo" },
  { id: 3, nombre: "Reinhardt", rol: "Tanque" },
  { id: 4, nombre: "Ana", rol: "Apoyo" },
  { id: 5, nombre: "Genji", rol: "Daño" },
  { id: 6, nombre: "Sigma", rol: "Tanque" },
];

// Medidor didáctico: cuántas veces se ha renderizado cada tarjeta.
const renders: Record<number, number> = {};

// La tarjeta, envuelta en memo. Ahora recibe también enEquipo: un booleano (primitivo),
// no un objeto. Eso importa, porque memo compara props por referencia: un primitivo
// "cambia" solo cuando su valor cambia, así que solo se re-renderiza la tarjeta afectada.
const TarjetaHeroe = memo(function TarjetaHeroe({
  heroe,
  enEquipo,
  onAñadir,
}: {
  heroe: Heroe;
  enEquipo: boolean;
  onAñadir: (h: Heroe) => void;
}) {
  // Suma uno al medidor de ESTA tarjeta cada vez que se renderiza.
  renders[heroe.id] = (renders[heroe.id] || 0) + 1;
  return (
    <article className="tarjeta">
      <h3 className="tarjeta__nombre">{heroe.nombre}</h3>
      <p className="tarjeta__rol">{heroe.rol}</p>
      <p className="tarjeta__renders">renders: {renders[heroe.id]}</p>
      {/* El botón se desactiva si el héroe ya está en el equipo. */}
      <button className="boton" onClick={() => onAñadir(heroe)} disabled={enEquipo}>
        {enEquipo ? "En el equipo" : "Añadir"}
      </button>
    </article>
  );
});

export default function App() {
  // Texto del filtro: cambia con cada tecla, así que el padre se re-renderiza al teclear.
  const [filtro, setFiltro] = useState("");
  // El equipo que va eligiendo el usuario.
  const [equipo, setEquipo] = useState<Heroe[]>([]);

  // Filtrar 6 héroes es barato: se recalcula en cada render, sin memoizar.
  const visibles = ROSTER.filter((heroe) =>
    heroe.nombre.toLowerCase().includes(filtro.toLowerCase()),
  );

  // Referencia estable de la función: la prop onAñadir no cambia entre renders, así que
  // memo puede saltarse el re-render de las tarjetas que no han cambiado.
  const añadir = useCallback((heroe: Heroe) => {
    setEquipo((actual) =>
      actual.some((h) => h.id === heroe.id) ? actual : [...actual, heroe],
    );
  }, []);

  return (
    <section>
      <h1 className="titulo">
        Roster ({visibles.length}) · equipo: {equipo.length}
      </h1>
      <input
        className="filtro"
        placeholder="Filtra por nombre…"
        value={filtro}
        onChange={(evento) => setFiltro(evento.target.value)}
      />
      <div className="lista">
        {visibles.map((heroe) => (
          <TarjetaHeroe
            // key estable (el id del héroe), nunca el índice del map.
            key={heroe.id}
            heroe={heroe}
            // enEquipo es un booleano: solo cambia para la tarjeta afectada cuando el
            // equipo cambia, así que memo deja quietas a TODAS las demás.
            enEquipo={equipo.some((h) => h.id === heroe.id)}
            onAñadir={añadir}
          />
        ))}
      </div>
    </section>
  );
}

import { memo, useCallback, useState } from "react";

// Un héroe del roster del Team Builder.
interface Heroe {
  id: number;
  nombre: string;
  rol: string;
}

// El roster es constante y vive FUERA del componente: su referencia no cambia entre renders.
const ROSTER: Heroe[] = [
  { id: 1, nombre: "Tracer", rol: "Daño" },
  { id: 2, nombre: "Mercy", rol: "Apoyo" },
  { id: 3, nombre: "Reinhardt", rol: "Tanque" },
  { id: 4, nombre: "Ana", rol: "Apoyo" },
  { id: 5, nombre: "Genji", rol: "Daño" },
  { id: 6, nombre: "Sigma", rol: "Tanque" },
];

// Medidor didáctico de renders por tarjeta. En una app real este medidor es el Profiler
// de las React DevTools: grabas la interacción y ves qué se renderizó de más.
const renders: Record<number, number> = {};

// La tarjeta, envuelta en memo, con props referencialmente estables (heroe del roster
// constante, enEquipo primitivo, onAñadir de useCallback). Por eso memo de verdad funciona.
const TarjetaHeroe = memo(function TarjetaHeroe({
  heroe,
  enEquipo,
  onAñadir,
}: {
  heroe: Heroe;
  enEquipo: boolean;
  onAñadir: (h: Heroe) => void;
}) {
  // Suma uno al medidor de ESTA tarjeta cada vez que se renderiza.
  renders[heroe.id] = (renders[heroe.id] || 0) + 1;
  return (
    <article className="tarjeta">
      <h3 className="tarjeta__nombre">{heroe.nombre}</h3>
      <p className="tarjeta__rol">{heroe.rol}</p>
      <p className="tarjeta__renders">renders: {renders[heroe.id]}</p>
      {/* El botón se desactiva si el héroe ya está en el equipo. */}
      <button className="boton" onClick={() => onAñadir(heroe)} disabled={enEquipo}>
        {enEquipo ? "En el equipo" : "Añadir"}
      </button>
    </article>
  );
});

export default function App() {
  // Texto del filtro: cambia con cada tecla, así que el padre se re-renderiza al teclear.
  const [filtro, setFiltro] = useState("");
  // El equipo que va eligiendo el usuario.
  const [equipo, setEquipo] = useState<Heroe[]>([]);

  // Filtrar 6 héroes es gratis: NO lo envuelvo en useMemo. El medidor decía que el
  // problema eran los re-renders de las tarjetas, no este filtro; memoizarlo solo añadiría
  // una comparación y ruido sin mover ninguna métrica. Memoizar lo que ya es barato es el error.
  const visibles = ROSTER.filter((heroe) =>
    heroe.nombre.toLowerCase().includes(filtro.toLowerCase()),
  );

  // La función SÍ se memoiza: es una prop de un hijo envuelto en memo, así que su
  // estabilidad referencial es justo lo que evita los re-renders en balde. Aquí sí se mide.
  const añadir = useCallback((heroe: Heroe) => {
    setEquipo((actual) =>
      actual.some((h) => h.id === heroe.id) ? actual : [...actual, heroe],
    );
  }, []);

  return (
    <section>
      <h1 className="titulo">
        Roster ({visibles.length}) · equipo: {equipo.length}
      </h1>
      {/* La etiqueta da un nombre accesible al campo (Nivel 7: accesibilidad en React). */}
      <label className="filtro-label">
        Filtrar héroes por nombre
        <input
          className="filtro"
          placeholder="Filtra por nombre…"
          value={filtro}
          onChange={(evento) => setFiltro(evento.target.value)}
        />
      </label>
      <div className="lista">
        {visibles.map((heroe) => (
          <TarjetaHeroe
            // key estable (el id del héroe), nunca el índice del map.
            key={heroe.id}
            heroe={heroe}
            enEquipo={equipo.some((h) => h.id === heroe.id)}
            onAñadir={añadir}
          />
        ))}
      </div>
    </section>
  );
}

// Nota honesta: con el React Compiler (plugin de build opt-in, Nivel 7) escribirías este
// componente SIN memo ni useCallback y tendrías la misma optimización. Memoizar a mano sirve
// para leer y mantener el código de hoy; el de mañana lo escribes simple y la herramienta mide.