react-best-practices

Identify and mitigate React/Next.js performance bottlenecks across projects.

Updated Jan 14, 2026
One-click install
npx skills add https://github.com/Brite-Nites/brite-claude-plugins --skill react-best-practices-brite-nites
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/Brite-Nites/brite-claude-plugins/tree/main/plugins/workflows/skills/react-best-practices
Command: npx skills add https://github.com/Brite-Nites/brite-claude-plugins --skill react-best-practices-brite-nites

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance challenges slow user experiences and complicate maintenance. This skill provides a structured, action-oriented guide to identify, prioritize, and implement performance improvements across codebases.

Core Features & Use Cases

  • Comprehensive guidance across 8 priority categories, covering waterfalls elimination, bundle optimization, server-side patterns, client-side data fetching, re-render tuning, rendering techniques, JavaScript micro-optimizations, and advanced patterns.
  • Concrete rules with examples to drive automated refactoring and code generation, including correct/incorrect snippets and practical outcomes.
  • Use cases include auditing new or existing React/Next.js projects to improve time-to-interactive, reduce bundle size, and optimize rendering efficiency across routes and components.

Quick Start

Run the performance checklist on a React/Next.js project to begin applying the top-priority optimization 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 identify and mitigate React performance bottlenecks in my web app?▼

To mitigate React performance bottlenecks, run a structured performance checklist across your project's components and data-fetching patterns. This process evaluates eight priority categories, including bundle optimization and re-render tuning, to prescribe concrete refactoring rules.

What's the best way to refactor Next.js data-fetching patterns for better performance?▼

The best way to refactor Next.js data-fetching patterns is applying server-side optimization rules that eliminate waterfalls. This approach provides concrete correct and incorrect code snippets to guide production-grade improvements for client-side and server-side rendering workflows.

How does reducing React bundle size and eliminating waterfalls improve time-to-interactive?▼

Reducing React bundle size and eliminating waterfalls directly improves time-to-interactive by minimizing JavaScript execution time and network requests. This optimization targets rendering efficiency and bundle delivery across modern web application routes.

Can I use this React optimization checklist for auditing an existing codebase during code review?▼

Yes, you can use this React optimization checklist for auditing an existing codebase during code review. It defines action-oriented rules organized by impact, supporting coding and refactoring workflows to evaluate components, pages, and data-fetching patterns.

When do I need to apply advanced React rendering techniques and micro-optimizations?▼

You need to apply advanced React rendering techniques and micro-optimizations when standard refactoring fails to resolve complex performance issues. This stage covers specialized rendering patterns and JavaScript micro-optimizations for end-to-end production-grade improvements.

Why does my React application still have slow rendering efficiency after standard refactoring?▼

Your React application may have slow rendering efficiency due to unoptimized re-render tuning or unaddressed server-side patterns. A structured performance audit identifies these specific issues across eight priority categories to apply targeted optimization patterns.