React Best Practices

React Best Practices es la skill de Vercel dedicada a patrones de rendimiento de React y Next.js. Sirve para escribir componentes, revisar una implementación o preparar una refactorización. La referencia organiza sus reglas por áreas y por impacto, de modo que la revisión pueda empezar por problemas de carga de datos y tamaño del código enviado antes de centrarse en ajustes menores del renderizado.

El material no es una aplicación que se añade al producto final. Es una colección de instrucciones y referencias que el agente consulta al trabajar sobre el código. Cada regla enlazada incluye una explicación, un ejemplo incorrecto y otro corregido. Ese formato permite relacionar el patrón recomendado con la forma concreta que tiene la implementación revisada.

Una revisión de rendimiento puede dispersarse entre cambios pequeños sin examinar primero cómo se espera por los datos o cuánto código llega al navegador. La estructura de esta skill da un orden a ese trabajo. Las recomendaciones abarcan operaciones asíncronas, cargas del bundle, responsabilidades del servidor y datos que se pasan a componentes del cliente.

También incorpora consideraciones que cruzan rendimiento y comportamiento del sistema. Por ejemplo, pide autenticar las acciones del servidor como las rutas de API y evitar estado mutable de solicitudes compartido desde un módulo. Aplicar un patrón de rendimiento no debe hacer que se pierda de vista dónde se ejecuta el código y qué información puede alcanzar otra solicitud o el cliente.

Ejemplo de KIRELEN: un equipo revisa una página que carga información antes de renderizar sus componentes. El primer análisis identifica cuáles de esas operaciones dependen del resultado de otra y cuáles son independientes. La regla de paralelismo se estudia para este segundo grupo, en lugar de aplicarse automáticamente a todas las llamadas.

Después se revisa qué información se entrega a los componentes del cliente y qué partes del código corresponden a componentes pesados. La referencia permite consultar reglas sobre serialización y carga dinámica, con ejemplos para entender el cambio propuesto. Si la página utiliza acciones del servidor, su autenticación se mantiene como parte de la revisión.

Este ejemplo describe un recorrido de inspección a partir de las reglas documentadas. No afirma que se haya reducido un tiempo de carga concreto ni que una modificación aislada mejore cualquier aplicación. Los cambios deberían comprobarse en el proyecto y con sus condiciones reales antes de atribuirles un resultado.

La propia skill declara licencia MIT, comprobado el 2026-10-26. El repositorio de Vercel reúne distintos conjuntos de instrucciones; el comando publicado incorpora ese conjunto mediante la CLI de Skills y permite seguir el proceso del cliente para seleccionar las capacidades que se necesitan.

El perfil de tecnologías describe el repositorio completo. Para esta skill, el alcance específico son las recomendaciones de React y Next.js y sus archivos de reglas. La revisión de una regla debe incluir su explicación y ejemplos, porque el propósito del paquete es orientar el trabajo sobre código real, no declarar un resultado de rendimiento antes de comprobarlo.