Can this skill help with React re-rendering issues?

Yes, it includes specific rules for memoization, derived state management, and functional setState patterns to minimize unnecessary component renders.

What is the primary focus of the 'Waterfall' category?

The waterfall category focuses on moving 'await' calls into specific branches and utilizing parallel fetching to prevent sequential loading delays.

Is it compatible with both Client and Server Components?

Absolutely, it provides patterns for both environments, including App Router specific optimizations and server-side serialization rules.

How does this skill improve Next.js performance?

It applies Vercel's engineering guidelines to eliminate request waterfalls, optimize bundle sizes, and improve server-side data fetching strategies.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: claudiodearaujo

byclaudiodearaujo

0•

开发者工具

Optimizes React and Next.js applications using Vercel Engineering's production-grade performance guidelines and patterns.

This skill integrates 45 high-impact performance rules curated by Vercel Engineering to enhance React and Next.js applications. It provides automated guidance for eliminating request waterfalls, minimizing bundle sizes, and optimizing server-side rendering patterns. Whether you are refactoring legacy code or building new components, this skill ensures your application adheres to modern industry standards for speed, efficiency, and resource management by prioritizing critical performance categories from data fetching to JavaScript execution.

主要功能

01Bundle size optimization via dynamic imports and barrel file removal

020 GitHub stars

03Efficient re-render management using memoization and stable callbacks

04Critical waterfall elimination using parallel processing and Suspense boundaries

05Server-side performance tuning with React cache and non-blocking operations

06Advanced JavaScript patterns for optimized DOM and data manipulation

使用场景

01Reviewing complex React components to identify and fix unnecessary re-renders

02Refactoring Next.js pages to improve Core Web Vitals and PageSpeed scores

03Implementing efficient data-fetching strategies in high-traffic web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front react-best-practices

For use in Claude.ai and ChatGPT

Download Skill

主要功能

01Bundle size optimization via dynamic imports and barrel file removal

020 GitHub stars

03Efficient re-render management using memoization and stable callbacks

04Critical waterfall elimination using parallel processing and Suspense boundaries

05Server-side performance tuning with React cache and non-blocking operations

06Advanced JavaScript patterns for optimized DOM and data manipulation

使用场景

01Reviewing complex React components to identify and fix unnecessary re-renders

02Refactoring Next.js pages to improve Core Web Vitals and PageSpeed scores

03Implementing efficient data-fetching strategies in high-traffic web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front react-best-practices

For use in Claude.ai and ChatGPT

Download Skill