react-best-practices

Consolidate React and Next.js performance guidelines across 57 rules and 8 categories.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/vibekit-apps/skills-registry --skill react-best-practices-vibekit-apps
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/vibekit-apps/skills-registry/tree/main/skills/react-perf
Command: npx skills add https://github.com/vibekit-apps/skills-registry --skill react-best-practices-vibekit-apps

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve React and Next.js performance by providing a consolidated set of hard-won rules and patterns to reduce re-renders, optimize data flows, and shrink bundles.

Core Features & Use Cases

  • 57 rules across 8 categories covering client-side rendering, server components, data fetching, and bundle optimization.
  • Real-world patterns and concrete examples for audit, code review, and refactoring workflows.
  • Use Case: When evaluating a React/Next.js project, apply these guidelines to identify bottlenecks and implement faster rendering with smaller payloads.

Quick Start

Apply these best practices to audit and improve your React/Next.js app's performance.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I reduce unnecessary re-renders in my React application?▼

Reduce unnecessary re-renders in your React application by applying a consolidated set of 57 rules covering client-side rendering, data fetching, and component architecture. These patterns optimize data flows and improve UI responsiveness.

What is the best way to optimize Next.js server components for smaller bundle sizes?▼

Optimize Next.js server components for smaller bundle sizes by applying targeted performance guidelines across 8 categories including server components and bundle optimization. This approach identifies bottlenecks and implements faster rendering with smaller payloads.

How do I audit my existing React codebase for performance bottlenecks?▼

Audit your existing React codebase for performance bottlenecks by applying documented rules during code reviews and refactoring workflows. This process identifies rendering issues and data flow inefficiencies using real-world patterns and concrete examples.

Can I use these React performance patterns for both client and server contexts?▼

Yes, you can use these React performance patterns for both client and server contexts. The guidelines cover 8 categories spanning client-side rendering, server components, and data fetching to ensure comprehensive optimization across your architecture.

Why does my Next.js application have slow UI responsiveness and large payloads?▼

Your Next.js application may have slow UI responsiveness and large payloads due to unoptimized data flows and rendering patterns. Applying 57 targeted best practices across 8 categories identifies bottlenecks and implements faster rendering with smaller payloads.