react-best-practices

Review React and Next.js code for performance optimization opportunities.

Updated Feb 10, 2026
One-click install
npx skills add https://github.com/powerhouse-inc/service-offering --skill react-best-practices-powerhouse-inc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/powerhouse-inc/service-offering/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/powerhouse-inc/service-offering --skill react-best-practices-powerhouse-inc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications, ensuring code is efficient, fast, and scalable.

Core Features & Use Cases

  • Performance Optimization: Provides over 40 rules for improving React/Next.js code quality and speed.
  • Code Refactoring Guidance: Offers patterns for eliminating waterfalls, optimizing bundle size, and enhancing server/client-side rendering.
  • Use Case: When reviewing a Next.js page that loads slowly, consult this Skill to identify and fix issues like unnecessary data fetching waterfalls or large bundle sizes.

Quick Start

Use the react-best-practices skill to refactor the provided React component for better 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 optimize React performance and eliminate data fetching waterfalls?▼

To optimize React performance, apply guidelines for eliminating data fetching waterfalls, bundle size reduction, and re-render optimization. These rules target unnecessary sequential data loads to improve application speed and scalability.

What are the best practices for refactoring a slow loading Next.js page?▼

Best practices for refactoring a slow Next.js page include optimizing server-side and client-side data fetching, reducing bundle size, and enhancing rendering performance. The guidelines help identify bottlenecks like large payloads and inefficient rendering.

How can I reduce React bundle size and improve rendering performance?▼

Reduce React bundle size and improve rendering performance by applying specific rules for code refactoring, re-render optimization, and efficient server/client-side rendering. This ensures code runs efficiently and scales effectively.

Does this approach work for both server-side and client-side data fetching in Next.js?▼

Yes, the optimization guidelines cover both server-side and client-side data fetching in Next.js. They provide patterns to structure data fetching efficiently, preventing waterfalls and ensuring fast rendering across different environments.

When should I use React code refactoring guidelines for performance optimization?▼

Use React code refactoring guidelines when reviewing code for performance bottlenecks or experiencing slow application speeds. They offer over 40 rules to fix issues like unnecessary re-renders and inefficient data fetching.

Why does my React application have rendering performance issues and how do I fix them?▼

Rendering performance issues in React often stem from unnecessary re-renders, large bundle sizes, or data fetching waterfalls. Fix them by applying targeted refactoring patterns to optimize component rendering and data retrieval.