react-best-practices

Identify and correct React and Next.js rendering, fetching, and bundle inefficiencies.

3|Updated Apr 18, 2026

Search Tags:#performance #refactoring #react #optimization #rendering #nextjs #bundles

Ready to run

npx skills add https://github.com/garochee33/DSH --skill react-best-practices-garochee33

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers avoid common React and Next.js performance mistakes that cause slow pages, unnecessary re-renders, oversized bundles, and inefficient data fetching.

Core Features & Use Cases

Performance-aware refactoring: Improves component structure, rendering behavior, and state handling to reduce wasted work.
Next.js optimization guidance: Applies best practices for server components, caching, parallel fetching, and bundle splitting.
Practical code review support: Helps identify and fix performance issues in existing React or Next.js codebases, such as waterfalls, heavy imports, or avoidable client-side work.

Quick Start

Ask the skill to review your React or Next.js code for performance problems and suggest specific refactors.

Frequently Asked Questions about react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I find and fix unnecessary re-renders in my React components?▼

To fix unnecessary React re-renders, review your component structure and state handling to identify wasted work, then apply memoization and performance-aware refactoring to reduce redundant rendering cycles.

What's the best way to optimize data fetching and caching in Next.js?▼

The best way to optimize Next.js data fetching is to apply Vercel-style best practices for caching, parallel fetching, and server components to eliminate waterfalls and reduce load times.

How do I reduce oversized bundles in a React or Next.js application?▼

To reduce oversized bundles in React and Next.js apps, identify heavy imports and avoidable client-side work, then apply bundle splitting and code refactoring to minimize load-time overhead.

Can I use this approach to review an existing React codebase for performance issues?▼

Yes, you can review existing React or Next.js codebases to identify performance issues like waterfalls, heavy imports, or avoidable client-side work, and receive specific refactoring suggestions to fix them.

When should I apply server components and memoization to improve web app rendering?▼

You should apply server components and memoization during component development and page refactoring to correct rendering inefficiencies, optimize client and server behavior, and reduce load times in modern web applications.