React
Debugging, StrictMode y React DevTools
Explica cómo depurar React distinguiendo render, commit, effects y remounts mediante StrictMode, React DevTools, Profiler y herramientas del navegador.
- Última actualización
- Actualizada
- Nivel
- Aplicación
React
Explica cómo depurar React distinguiendo render, commit, effects y remounts mediante StrictMode, React DevTools, Profiler y herramientas del navegador.
Distingue entre:
No son equivalentes.
En desarrollo React repite ciertas operaciones para detectar render impuro, cleanup faltante y APIs antiguas.
<StrictMode>
<App />
</StrictMode>Eliminar StrictMode puede ocultar el problema, no corregirlo.
Permite inspeccionar props, estado, contextos y propietario del componente.
Profiler y herramientas compatibles ayudan a detectar props o contextos que cambiaron.
Un console.log dentro del render indica ejecuciones, pero no commits visibles. Usa marcas claras y evita sacar conclusiones solo por duplicación en desarrollo.
No ignores warnings de keys, inputs controlados, Hooks o hidratación. Suelen indicar una ruptura real del modelo.
useMemo sin diagnóstico.Depurar React requiere seguir flujo de datos, identidad y fases, no contar logs de forma aislada.
síntoma
↓
¿render, commit, effect, navegador o red?
↓
fuente de actualización
↓
identidad y datos
↓
reproducción mínimaNo empieces añadiendo memoización. Primero identifica qué fase produce el comportamiento.
Un log dentro del componente indica ejecuciones de la función, no cambios visibles:
console.log("render", props);React puede ejecutar, interrumpir o descartar un render. Para saber si hubo commit, usa Profiler o observa DOM/effects. En Strict Mode, desarrollo repite renders para descubrir impureza.
Síntomas de remount:
null y nodo nuevo.Causas:
Un rerender normal preserva la instancia.
Comprobaciones de desarrollo incluyen ejecuciones adicionales de:
El objetivo es revelar código que depende de ejecutarse exactamente una vez. Producción no repite estas comprobaciones, pero el bug de pureza continúa siendo real.
Incorrecto:
const items = props.items;
items.push(newItem); // duplicará y mutará durante pruebasCorrecto:
const items = [...props.items, newItem];React DevTools permite:
No confundas el árbol React con el DOM; un componente puede no tener nodo propio.
Graba una interacción concreta. Observa:
Perfila builds representativos; desarrollo incluye overhead.
Pregunta:
Puedes envolver setters o acciones con logs temporales y breakpoints. El stack de llamada suele ser más útil que contar renders.
Un effect repetido puede ser correcto porque cambió una dependencia. Registra cada una:
useEffect(() => {
console.table({ roomId, serverUrl });
// ...
}, [roomId, serverUrl]);En consola puedes guardar arrays y comparar referencias. Si un objeto cambia, busca dónde se crea y si realmente debe ser dependencia.
Warnings de hydration suelen venir de:
Compara HTML servidor y primer render cliente. No uses suppressHydrationWarning como solución general.
Si un handler se ejecuta dos veces:
type="button".Esta última distinción evita culpar al modo de desarrollo.
Una request duplicada puede venir de:
Usa Network panel, initiator y request IDs.
React Profiler no muestra todo. Chrome/Firefox performance ayudan a encontrar:
Una UI puede tener pocos renders y seguir lenta por CSS o imágenes.
Reduce:
Mantén el síntoma. Una reproducción mínima separa React de integración y suele revelar la causa.
No filtres warnings globalmente en tests.
Rendimiento y React Profiler convierte el diagnóstico en medición sistemática.