When should I use this skill?

Apply this skill when writing new React components, refactoring Next.js pages, or performing code reviews to ensure your code follows optimal performance patterns.

Can it help reduce unnecessary React re-renders?

Yes, it contains specific rules for memoization, derived state management, and functional setState patterns to ensure components only update when necessary.

What does the Vercel React Best Practices skill do?

It applies 45 prioritized rules for React and Next.js to optimize performance, focusing on areas like bundle size, data fetching, and rendering efficiency.

Does this skill help with Next.js App Router?

Yes, it includes specific guidelines for server-side performance, data fetching, and parallelization that are highly relevant to the Next.js App Router architecture.

How does it handle bundle size optimization?

It provides rules for avoiding barrel imports, implementing next/dynamic imports, and deferring third-party scripts to significantly improve initial load times.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: mamuso

bymamuso

•

Herramientas para Desarrolladores

Optimizes React and Next.js applications using industry-leading performance patterns and Vercel engineering standards.

Acerca de

This skill provides a comprehensive set of 45 prioritized rules designed to enhance the performance and efficiency of React and Next.js applications. By integrating Vercel's engineering best practices directly into your workflow, it helps developers eliminate async waterfalls, optimize bundle sizes, and minimize unnecessary re-renders. Whether you are building new components or refactoring existing codebases, this skill ensures your application adheres to high-performance standards for both client and server-side execution.

Características Principales

Optimizes component rendering to prevent unnecessary re-renders
Improves server-side performance using React cache and non-blocking operations
Reduces bundle sizes through dynamic imports and barrel file optimization
39 GitHub stars
Eliminates asynchronous waterfalls with parallel fetching patterns
Provides automated guidance for efficient JavaScript and DOM manipulation

Casos de Uso

Refactoring legacy React codebases for better Core Web Vitals
Conducting automated performance reviews during the development process
Implementing high-performance data fetching patterns in Next.js App Router

Acerca de

Características Principales

Optimizes component rendering to prevent unnecessary re-renders
Improves server-side performance using React cache and non-blocking operations
Reduces bundle sizes through dynamic imports and barrel file optimization
39 GitHub stars
Eliminates asynchronous waterfalls with parallel fetching patterns
Provides automated guidance for efficient JavaScript and DOM manipulation

Casos de Uso

Refactoring legacy React codebases for better Core Web Vitals
Conducting automated performance reviews during the development process
Implementing high-performance data fetching patterns in Next.js App Router