react-best-practices

Apply 45+ rules to optimize React and Next.js performance.

3|Updated Dec 22, 2025

Search Tags:#performance #react #optimization #next.js #best-practices #memoization #code-splitting

Ready to run

npx skills add https://github.com/JoaquinCampo/codex-skills --skill react-best-practices-joaquincampo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/JoaquinCampo/codex-skills/tree/main/react-best-practices
Command: npx skills add https://github.com/JoaquinCampo/codex-skills --skill react-best-practices-joaquincampo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often struggle with performance due to waterfalls, large bundles, and unstable rendering patterns. This Skill provides a curated, rule-based guide to apply best practices and ensure scalable, high-performance code.

Core Features & Use Cases

45+ rules across 8 categories (async, bundle, server, client, rerender, rendering, js, advanced) to guide automated refactoring and code generation.
Clear, actionable guidance for writing, reviewing, or refactoring React/Next.js code to optimize performance and UX.
Use cases include reducing initial load times, improving TTI/LCP, and ensuring stable renders across server and client boundaries.

Quick Start

Provide your React/Next.js project and request an optimization plan. The skill analyzes components, pages, and data-fetching patterns and returns a prioritized list of changes. Use the recommendations to refactor or generate code samples that align with the rules.

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 for slow initial load times?▼

To optimize React and Next.js performance, you apply established best practices across data fetching, bundle reduction, and rendering patterns. This skill analyzes components and pages to return a prioritized list of changes improving TTI and LCP.

What is the best way to prevent unnecessary React component rerenders?▼

Preventing unnecessary React rerenders involves applying memoization and stable rendering patterns across client and server boundaries. The skill provides actionable rules to guide code generation and refactoring for stable UI rendering.

How do I fix data fetching waterfalls in Next.js applications?▼

Fixing data fetching waterfalls in Next.js requires applying established async best practices. The skill targets data fetching strategies to identify waterfalls and returns actionable guidance to optimize parallel data loading.

Can I use these React optimization rules for both client and server components?▼

Yes, these React optimization rules apply across both client and server component boundaries. The skill provides categorized guidance for server, client, and rendering patterns to ensure scalable, high-performance code execution.

How do I reduce large JavaScript bundles in Next.js?▼

Reducing large JavaScript bundles in Next.js is achieved through code-splitting and bundle optimization rules. The skill analyzes your project and recommends prioritized changes to minimize bundle size and improve load times.

When should I use memoization in React components?▼

Memoization in React components should be used when optimizing rendering performance and preventing unstable renders. The skill provides a curated, rule-based guide to determine exactly when and how to apply memoization effectively.