skills.rest
paulpessoa
paulpessoaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-best-practices

Applies 57 Vercel performance rules when writing, reviewing, or refactoring React and Next.js code.

3|1|Updated Mar 17, 2022
Search Tags:#code review#react#bundle size#next.js#performance optimization#vercel#async waterfalls
One-click install
npx skills add https://github.com/paulpessoa/menvo --skill react-best-practices-paulpessoa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/paulpessoa/menvo/tree/main/.agent/skills/react-best-practices
Command: npx skills add https://github.com/paulpessoa/menvo --skill react-best-practices-paulpessoa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React and Next.js applications often ship with hidden performance problems such as async waterfalls, bloated bundles, unnecessary re-renders, and blocking server operations. This Skill gives an AI assistant a structured, prioritized rule set from Vercel Engineering so it can detect and fix these issues while writing or reviewing code. ## Core Features & Use Cases - 57 Prioritized Rules Across 8 Categories: Covers eliminating waterfalls (CRITICAL), bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript micro-optimizations, and advanced patterns. - Incorrect/Correct Code Examples: Each rule file includes a bad pattern, a corrected pattern, and an explanation, enabling concrete refactoring suggestions rather than vague advice. - Use Case: While reviewing a Next.js page that sequentially awaits user, posts, and comments fetches, the assistant applies the async-parallel rule to rewrite the code with Promise.all(), cutting three round trips to one. ## Quick Start Review my React component and Next.js API route for performance issues using the react-best-practices guidelines and suggest fixes.

Frequently Asked Questions about react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix async waterfalls in Next.js API routes?▼

Start independent promises immediately and await them later, or use Promise.all() for operations with no interdependencies. For partial dependency chains, the better-all library starts each task at the earliest possible moment.

How to reduce bundle size from barrel file imports?▼

Import directly from source files instead of barrel entry points, since libraries like lucide-react can re-export thousands of modules. In Next.js 13.5+, the optimizePackageImports config option rewrites barrel imports to direct imports at build time.

When should I use React.memo and useMemo for re-render optimization?▼

Extract expensive work into memoized components so early returns can skip computation, but avoid useMemo for simple primitive expressions where comparison overhead exceeds the computation. If React Compiler is enabled, manual memoization is unnecessary.

Does this skill cover React component architecture or composition patterns?▼

No. The skill explicitly excludes component API architecture and composition patterns, directing those tasks to a separate react-composition-patterns skill. It focuses strictly on performance optimization rules.

Why does my Next.js page flicker when reading localStorage during hydration?▼

Reading localStorage in useEffect causes a visible flash because the server-rendered default renders first. Inject a synchronous inline script that updates the DOM before React hydrates to eliminate both the flicker and hydration mismatch.

Related Skills

Explore More Software Engineering Skills→
chrishuffman5chrishuffman5

react-best-practices

Apply 64 performance rules across 8 categories to React and Next.js applications.

Community
Advanced
masakinihirotamasakinihirota

optimize

Diagnoses and fixes UI performance issues across loading, rendering, animations, and bundle size.

Community
Intermediate
AI-Foundry-CoreAI-Foundry-Core
4

python-design-patterns

Explain and apply Python design patterns for maintainable code.

Official
Intermediate
OpenAEC-FoundationOpenAEC-Foundation
6

react-impl-performance

Analyze React render performance and optimize re-renders and bundle size.

Official
Advanced