skills.rest
anntnzrb
anntnzrbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-best-practices

Apply React/Next.js performance best practices across pages, components, and data fetching.

1|Updated Jan 18, 2026
Search Tags:#performance#react#nextjs#best-practices#bundling#web-vitals#code-refactor
One-click install
npx skills add https://github.com/anntnzrb/agents --skill react-best-practices-anntnzrb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/anntnzrb/agents/tree/main/assets/skills/react-best-practices
Command: npx skills add https://github.com/anntnzrb/agents --skill react-best-practices-anntnzrb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js applications often struggle with performance due to suboptimal coding patterns, bloated bundles, and waterfalls that block rendering. This guide collects Vercel-engineered best practices to help engineers write, review, and refactor code for faster, more reliable apps.

Core Features & Use Cases

  • Prioritized guidelines across 8 categories (async, bundle, server, client, rerender, rendering, js, advanced) to drive meaningful performance gains.
  • Concrete rules and examples for eliminating waterfalls, reducing bundle size, parallelizing data fetching, and optimizing server/client rendering paths.
  • Practical scenarios for refactoring, code generation, and automated tooling to reach measurable improvements in UX and efficiency.

Quick Start

Review a React/Next.js codebase and apply the 8-category guidelines to optimize rendering, data fetching, and bundle sizes.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I optimize React and Next.js rendering performance?▼

Optimize React and Next.js rendering by applying structured best practices across server and client rendering paths, parallelizing data fetching, and eliminating waterfalls to achieve measurable UX improvements.

What's the best way to reduce bundle size in a Next.js application?▼

Reduce Next.js bundle size by applying bundling guidelines from the best practices guide, which provide concrete rules for eliminating bloated bundles and optimizing code generation for faster app speed.

Why does my React app have slow rendering and data fetching waterfalls?▼

React apps experience slow rendering from suboptimal coding patterns and blocking waterfalls. Apply Vercel-engineered best practices to parallelize data fetching and optimize server/client rendering paths.

Can I use these performance best practices with both server and client data fetching?▼

Yes, the best practices are applicable across typical React/Next.js projects covering both server and client data fetching, providing concrete rules and scenarios for optimizing each rendering path.

How do I refactor a React codebase to improve Web Vitals?▼

Refactor a React codebase by reviewing it against 8 categorized performance guidelines covering async, bundle, server, client, rerender, rendering, JS, and advanced optimizations to drive measurable web vitals gains.

What limitations exist when applying Next.js performance best practices?▼

The best practices target typical React/Next.js projects across pages, components, data fetching, and bundle optimization, with safety rules to prevent risky behaviors during code refactoring and generation.

Related Skills

Explore More Software Engineering Skills→
Tai-ch0802Tai-ch0802
2

react-best-practices

Audit React and Next.js projects for performance bottlenecks and optimization opportunities.

Community
Intermediate
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak

optimize

Diagnose and fix UI performance issues using Core Web Vitals measurements.

Community
Advanced
underPressueunderPressue

react-best-practices

Audit React and Next.js codebases for performance optimization opportunities.

Community
Advanced
lildibbblildibbb

performance-optimization

Analyze web application performance with Lighthouse and Web Vitals.

Community
Advanced