react-best-practices

name	React Best Practices
description	GUÍAS de optimización de rendimiento React y Next.js de Vercel Engineering. 70+ reglas en 8 categorías priorizadas por impacto. Hacer cumplir: sin cascadas de datos, sin moment.js, sin importaciones de barril, Server Components por defecto, TanStack Query para obtención en cliente. Activadores: escribir/revisar/refactorizar código React o Next.js, optimizar tamaño de bundle o tiempos de carga.
license	MIT
metadata	{"author":"vercel","version":"2.0.0","last_updated":"2026-06-28T00:00:00.000Z"}
stacks	["React 19.2","Next.js 16","TanStack Query v5+","TypeScript 6.0"]
related_skills	["component-architecture-patterns","empty-loading-error-states","performance-budgets-and-cwv","saas-app-structure","full-stack-file-tree-architecture","react-composition","react-view-transitions"]
category	react
version	2.0.0
lang	es
direction	ltr
source_version	2.0.0
translated_at	2026-06-29T00:00:00.000Z

React Best Practices: Vercel Engineering

IDENTIFICAR: Cuándo activarse

Activar cuando:

• Se escriben nuevos componentes React o páginas Next.js
• Se implementa obtención de datos (cliente o servidor)
• Se revisa código en busca de problemas de rendimiento
• Se refactoriza código React/Next.js existente
• Se optimiza tamaño de bundle o tiempos de carga
• CUALQUIER generación de código para proyectos React/Next.js

MAPA DE PRIORIDAD: Categorías de Reglas por Impacto

Prioridad	Categoría	Impacto	Prefijo	Aplicar Cuando
1	Eliminar Cascadas	CRÍTICO	async-	Obtención de datos
2	Optimización de Bundle	CRÍTICO	bundle-	Importar módulos, añadir bibliotecas
3	Rendimiento del Servidor	ALTO	server-	Server Components, rutas API
4	Obtención de Datos del Cliente	MEDIO-ALTO	client-	Componentes cliente obteniendo datos
5	Optimización de Re-renderizado	MEDIO	rerender-	Gestión de estado, actualizaciones de componentes
6	Rendimiento de Renderizado	MEDIO	rendering-	Diseño, hidratación, SVG
7	Rendimiento JavaScript	BAJO-MEDIO	js-	Bucles, búsquedas, operaciones DOM
8	Patrones Avanzados	BAJO	advanced-	Casos límite, refs, efectos

EJECUTAR: SIEMPRE Aplicar Reglas por Prioridad

Prioridad 1: Eliminar Cascadas

// ✅ Paralelo, obtenciones independientes combinadas
const [user, posts] = await Promise.all([(), ()]);


 user =  ();
 posts =  ();