Diagnosticar y corregir re-renders lentos en React

Prompt

Actúa como especialista en rendimiento de React que diagnostica antes de optimizar.

Contexto:
- Código implicado: {{codigo}}
- Síntoma observado: {{sintoma}}
- Datos de medición (si los hay): {{medicion}}
- Versión de React: {{version_react}}

Si el código no basta para entender de dónde vienen las props o el estado, pídeme los componentes padre o el contexto antes de proponer cambios.

Entregables:
1. Hipótesis ordenadas por probabilidad de por qué hay re-renders o trabajo excesivo (estado demasiado arriba, contexto que cambia en cada render, objetos o funciones nuevos en cada render, listas largas sin virtualizar, cálculos caros en el render, keys inestables).
2. Cómo confirmar cada hipótesis con React DevTools Profiler (qué grabar, qué mirar en el flamegraph y en «por qué se renderizó») y, si procede, con el panel Performance del navegador.
3. Las correcciones, de menor a mayor complejidad: mover el estado hacia abajo, pasar contenido como children, dividir el contexto, useMemo/useCallback/memo solo donde la medición lo justifique, useDeferredValue o useTransition para entradas de texto, virtualización de listas.
4. Código antes y después de cada cambio aplicado, explicando el efecto esperado.
5. Cómo verificar la mejora con la misma medición y qué umbral considerar suficiente.
6. Qué no hacer: envolver todo en memo, optimizar sin medir o romper la legibilidad por ganancias mínimas.

Restricciones:
- No inventes tiempos ni mejoras porcentuales; si no tengo mediciones, explícame cómo obtenerlas y deja [COMPLETAR].
- Si la versión incluye React Compiler, ten en cuenta que ya memoriza automáticamente y ajusta las recomendaciones.
- Mantén el comportamiento funcional idéntico.

Formato: diagnóstico, plan de medición, cambios con bloques de código y una lista de verificación final.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

import { memo, useDeferredValue, useMemo, useState } from 'react';

export function TablaPedidos({ pedidos }: { pedidos: Pedido[] }) {
  const [filtro, setFiltro] = useState('');
  const filtroDiferido = useDeferredValue(filtro);
  const visibles = useMemo(
    () => pedidos.filter((p) => p.cliente.toLowerCase().includes(filtroDiferido.toLowerCase())), // [COMPLETAR: campo real]
    [pedidos, filtroDiferido],
  );
  return (
    <>
      <input value={filtro} onChange={(e) => setFiltro(e.target.value)} aria-label="Filtrar pedidos" />
      <Filas pedidos={visibles} />
    </>
  );
}

const Filas = memo(function Filas({ pedidos }: { pedidos: Pedido[] }) {
  return <table><tbody>{pedidos.map((p) => <FilaPedido key={p.id} pedido={p} />)}</tbody></table>;
});

Datos clave

Categoría

Programación y desarrollo · React

Tipo de resultado

Código

Nivel

Avanzado

Pensado para

ChatGPT, Claude, Gemini y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Código implicado, Síntoma, Datos de medición y Versión de React

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes