react-best-practices

Optimize React and Next.js performance by resolving rendering bottlenecks and network waterfalls.

Updated Jul 18, 2026
One-click install
npx skills add https://github.com/arthrod/conejo-skills --skill react-best-practices-arthrod
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/arthrod/conejo-skills/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/arthrod/conejo-skills --skill react-best-practices-arthrod

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires better-all, lru-cache, swr, zod, and includes references (resource) components.

What problem does it solve?

This skill addresses common performance bottlenecks, inefficient rendering patterns, and architectural anti-patterns in React and Next.js applications, ensuring high-performance, maintainable codebases.

Core Features & Use Cases

  • Performance Optimization: Provides 57 actionable rules covering waterfall elimination, bundle size reduction, and server-side rendering efficiency.
  • Architectural Guidance: Offers a clear decision tree for when to use Effects versus event handlers, refs, or memoization.
  • Use Case: Use this skill when refactoring a slow dashboard to eliminate network waterfalls, optimize component re-renders, or implement efficient data fetching strategies in Server Components.

Quick Start

Apply the react-best-practices skill to analyze the current component file and suggest performance improvements based on the defined 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 component rendering and eliminate network waterfalls?▼

Optimize React rendering by applying architectural rules to refactor components, manage state efficiently, and restructure server-side data fetching. This eliminates network waterfalls and reduces inefficient bundle usage in Next.js applications.

What is the best way to decide between using React Effects and event handlers?▼

The best way to decide between React Effects and event handlers is to use a clear architectural decision tree. This guides when to apply Effects versus event handlers, refs, or memoization to prevent inefficient rendering patterns.

How do I implement efficient data fetching strategies in Next.js Server Components?▼

Implement efficient data fetching in Next.js Server Components by adhering to Vercel-aligned engineering standards for React hooks, effects, and RSC boundaries. This resolves architectural anti-patterns and optimizes server-side rendering efficiency.

Does this React performance optimization approach work with Next.js and RSC boundaries?▼

Yes, this React performance optimization works directly with Next.js and RSC boundaries. It applies Vercel-aligned engineering standards to ensure high-performance maintainable codebases across server-side rendering workflows.

Why does my React dashboard have slow performance and inefficient bundle usage?▼

Your React dashboard has slow performance due to common bottlenecks like network waterfalls, inefficient rendering patterns, and architectural anti-patterns. Refactoring components and optimizing state management resolves these issues.