- Vercel publicó un repositorio estructurado,
React-Best-Practices, basado en más de 10 años de experiencia en optimización de rendimiento con React y Next.js
- Este repositorio está diseñado para que agentes de IA y LLM puedan tomar decisiones de optimización consistentes durante revisiones de código o refactorizaciones
- La idea central es priorizar la eliminación de waterfalls y la reducción del tamaño del bundle, y se organiza en 8 categorías que abarcan rendimiento de servidor, cliente y renderizado
- Cada regla incluye un nivel de importancia (CRITICAL~LOW) junto con ejemplos de código incorrecto y su versión corregida
- Son reglas validadas en casos reales de producción, lo que permite dar soporte a optimizaciones automáticas mediante integración con agentes de código
Resumen de React Best Practices
react-best-practices es un repositorio que concentra más de 10 años de conocimiento acumulado de optimización en React y Next.js
- Está estructurado para que agentes de IA y LLM puedan consultarlo al analizar código y sugerir mejoras
- Los problemas de rendimiento en React a menudo aparecen como respuesta a síntomas de lentitud detectados después del lanzamiento
- Entre las principales causas se señalan la ejecución secuencial de tareas asíncronas, bundles de cliente cada vez más grandes y rerenderizados innecesarios
- Estos problemas funcionan como cuellos de botella estructurales que agregan un costo repetitivo a cada sesión de usuario
Idea clave: optimización basada en prioridades
- Muchos intentos de mejorar el rendimiento empiezan en niveles bajos del stack y terminan fallando
- Por ejemplo, si un waterfall de solicitudes agrega 600 ms, optimizar
useMemo no tiene sentido
- Si cada página envía 300 KB de JavaScript innecesario, las microoptimizaciones de loops no generan impacto
- El framework comienza con dos acciones clave
- Eliminar waterfalls
- Reducir el tamaño del bundle
- Después se expande en este orden: rendimiento del servidor, data fetching del cliente y optimización de rerenderizados
- En total hay 8 categorías y más de 40 reglas ordenadas por nivel de importancia
- El nivel CRITICAL se enfoca en eliminar waterfalls y reducir bundles; el nivel LOW cubre patrones avanzados
Principales categorías incluidas
- El repositorio cubre las siguientes 8 áreas de rendimiento
- Eliminación de waterfalls asíncronos
- Optimización del tamaño del bundle
- Rendimiento del servidor
- Data fetching del cliente
- Optimización de rerenderizados
- Rendimiento de renderizado
- Patrones avanzados
- Rendimiento de JavaScript
- Cada regla ofrece un nivel de impacto (CRITICAL~LOW) junto con ejemplos de código incorrecto y corregido
- Ejemplo: código que espera datos en todas las ramas debido a llamadas innecesarias a
await → se corrige cambiando el orden de las condiciones para esperar solo cuando sea necesario
- Todos los archivos de reglas se compilan en
AGENTS.md, de modo que los agentes de IA puedan consultarlos directamente durante revisiones de código
Recolección de reglas basada en casos reales
- Todas las reglas se basan en experiencias reales de mejora de rendimiento en codebases de producción
- Unificación de loops: código que recorría una lista de mensajes 8 veces se redujo a una sola pasada, mejorando la eficiencia al procesar grandes volúmenes de datos
- Paralelización asíncrona: llamadas a la base de datos sin dependencias se ejecutaron en paralelo para reducir a la mitad el tiempo total de espera
- Ajuste del fallback de fuentes: al usar fuentes del sistema, se ajustó el espaciado entre letras para mantener una visualización natural incluso en estado de fallback
Integración con agentes de código
react-best-practices se ofrece como paquete de Agent Skills, por lo que puede instalarse en distintos agentes de código
- Puede usarse en Opencode, Codex, Claude Code, Cursor y otros
- Si el agente detecta llamadas anidadas a
useEffect o imports pesados en el cliente, puede consultar la regla correspondiente y proponer una corrección
- Comando de instalación:
npx add-skill vercel-labs/agent-skills
- El repositorio completo puede revisarse en GitHub:
react-best-practices
2 comentarios
https://ywc.life/posts/vercel-react-best-practice
Intenté traducirlo completo.
¡Gracias! Lo leeré con atención.