react-best-practices

Optimize React and Next.js components with performance best practices.

Updated Apr 4, 2026

Search Tags:#performance #suspense #react #nextjs #server-actions #code-splitting #web-vitals

Ready to run

npx skills add https://github.com/PheonixCodder/Beeclean-Production --skill react-best-practices-pheonixcodder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/PheonixCodder/Beeclean-Production/tree/main/.agents/skills/react-best-practices
Command: npx skills add https://github.com/PheonixCodder/Beeclean-Production --skill react-best-practices-pheonixcodder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React/Next.js performance can degrade due to waterfalls, heavy bundles, and suboptimal data fetching. This skill consolidates Vercel's guidelines to help you systematically apply high-impact optimizations.

Core Features & Use Cases

Guides for server actions security and parallel data fetching
Patterns for Suspense, dynamic imports, and per-request caching
Use cases across writing, reviewing, or refactoring React components, Next.js pages, and data flows

Quick Start

Refactor the provided React/Next.js code to follow the documented performance guidelines.

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 performance by reducing data fetching waterfalls?▼

To optimize React and Next.js performance, apply parallel data fetching patterns and per-request caching. This minimizes waterfalls and improves Time to Interactive by fetching data concurrently instead of sequentially.

What is the best way to use Suspense in Next.js to improve web vitals?▼

The best way to use Suspense in Next.js is wrapping asynchronous components to stream UI progressively. This pattern improves web vitals by showing fallback content immediately, reducing perceived load times and minimizing blocking.

How do I secure Next.js server actions when refactoring components?▼

To secure Next.js server actions when refactoring components, apply documented security guidelines and validate inputs. This ensures safe server-side mutations and protects against unauthorized access during data fetching operations.

When should I use dynamic imports and code splitting in React?▼

Use dynamic imports and code splitting in React when you need to reduce heavy bundle sizes. This approach optimizes performance by loading components lazily, which significantly minimizes Time to Interactive for your application.

Does this approach work for both writing new Next.js pages and reviewing existing React components?▼

Yes, this approach works for writing, reviewing, and refactoring React components and Next.js pages. It systematically applies performance best practices across various data flows and bundle optimization tasks to ensure optimal web vitals.