Optimización de Rendimiento de React — Perfila, mide e impide re-renderizados innecesarios

import { memo, useMemo, useCallback, useTransition } from "react";
 
// Memoiza componente caro
const ExpensiveList = memo(function ExpensiveList({
  items,
  onSelect,
}: {
  items: Item[];
  onSelect: (id: string) => void;
}) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id} onClick={() => onSelect(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});
 
// Padre: estabiliza props pasados a hijos memoizados
function Parent() {
  const [items] = useState<Item[]>(initialItems);
  const [selected, setSelected] = useState<string | null>(null);
 
  // Referencia de callback estable
  const handleSelect = useCallback((id: string) => {
    setSelected(id);
  }, []);
 
  return <ExpensiveList items={items} onSelect={handleSelect} />;
}

import {
  memo,
  useMemo,
  useCallback,
  useState,
  useTransition,
  useDeferredValue,
} from "react";
 
// --- Lista virtualizada con filas memoizadas ---
 
interface Contact {
  id: string;
  name: string;
  email: string;
  avatar: string;
}
 
const ContactRow = memo(function ContactRow({
  contact,
  isSelected,
  onSelect,
}: {
  contact: Contact;
  isSelected: boolean;
  onSelect: (id: string) => void;
}) {
  return (
    <div
      onClick={() => onSelect(contact.id)}
      className={`flex items-center gap-3 p-3 cursor-pointer ${
        isSelected ? "bg-blue-50 border-l-4 border-blue-500" : "hover:bg-gray-50"
      }`}
    >
      <img
        src={contact.avatar}
        alt=""
        className="w-10 h-10 rounded-full"
        loading="lazy"
      />
      <div>
        <p className="font-medium">{contact.name}</p>
        <p className="text-sm text-gray-500">{contact.email}</p>
      </div>
    </div>
  );
});
 
// --- Búsqueda con valor diferido ---
 
function ContactList({ contacts }: { contacts: Contact[] }) {
  const [query, setQuery] = useState("");
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;
 
  // El filtrado caro solo se vuelve a ejecutar cuando deferredQuery o contacts cambian
  const filtered = useMemo(
    () =>
      contacts.filter(
        (c) =>
          c.name.toLowerCase().includes(deferredQuery.toLowerCase()) ||
          c.email.toLowerCase().includes(deferredQuery.toLowerCase())
      ),
    [contacts, deferredQuery]
  );
 
  const handleSelect = useCallback((id: string) => {
    setSelectedId(id);
  }, []);
 
  return (
    <div className="max-w-md border rounded-lg overflow-hidden">
      <div className="p-3 border-b">
        <input
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Buscar contactos..."
          className="w-full px-3 py-2 border rounded"
        />
      </div>
      <div
        className={`max-h-96 overflow-y-auto ${isStale ? "opacity-60" : ""}`}
      >
        {filtered.length === 0 ? (
          <p className="p-4 text-gray-500 text-center">No se encontraron contactos</p>
        ) : (
          filtered.map((contact) => (
            <ContactRow
              key={contact.id}
              contact={contact}
              isSelected={contact.id === selectedId}
              onSelect={handleSelect}
            />
          ))
        )}
      </div>
      <div className="p-2 border-t text-sm text-gray-400 text-center">
        {filtered.length} de {contacts.length} contactos
      </div>
    </div>
  );
}
 
// --- Transición para cambio de pestaña ---
 
function TabPanel({ tabs }: { tabs: { id: string; label: string; content: () => JSX.Element }[] }) {
  const [activeTab, setActiveTab] = useState(tabs[0].id);
  const [isPending, startTransition] = useTransition();
 
  const handleTabChange = (tabId: string) => {
    startTransition(() => {
      setActiveTab(tabId);
    });
  };
 
  const ActiveContent = tabs.find((t) => t.id === activeTab)?.content;
 
  return (
    <div>
      <div className="flex border-b">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => handleTabChange(tab.id)}
            className={`px-4 py-2 -mb-px ${
              activeTab === tab.id
                ? "border-b-2 border-blue-500 font-medium"
                : "text-gray-500"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className={`p-4 ${isPending ? "opacity-50 transition-opacity" : ""}`}>
        {ActiveContent && <ActiveContent />}
      </div>
    </div>
  );
}

const Chart = memo(
  function Chart({ data, config }: ChartProps) {
    // Renderizado caro
    return <canvas />;
  },
  (prev, next) => {
    // Solo re-renderiza si la longitud de data o config cambian
    return (
      prev.data.length === next.data.length &&
      prev.config.type === next.config.type
    );
  }
);

import { Profiler, type ProfilerOnRenderCallback } from "react";
 
const onRender: ProfilerOnRenderCallback = (
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime
) => {
  console.table({ id, phase, actualDuration, baseDuration });
};
 
function App() {
  return (
    <Profiler id="ContactList" onRender={onRender}>
      <ContactList contacts={contacts} />
    </Profiler>
  );
}

// Esto hace que SearchResults se re-renderice cuando count cambia:
function BadParent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <SearchResults /> {/* Se re-renderiza innecesariamente */}
    </div>
  );
}
 
// Solución: eleva el estado a un componente más pequeño
function GoodParent() {
  return (
    <div>
      <Counter /> {/* count state delimitado aquí */}
      <SearchResults /> {/* Ya no se re-renderiza */}
    </div>
  );
}
 
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}