react-best-practices

Optimize React and Next.js applications for performance improvements.

Updated Jun 18, 2026

Search Tags:#code review #performance #react #optimization #nextjs #server components #bundle optimization

Ready to run

npx skills add https://github.com/MinhDuyDEV/mdpi --skill react-best-practices-minhduydev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/MinhDuyDEV/mdpi/tree/main/.pi/skills/react-best-practices
Command: npx skills add https://github.com/MinhDuyDEV/mdpi --skill react-best-practices-minhduydev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers identify and fix React and Next.js performance issues by applying proven engineering patterns for rendering, data fetching, bundling, and server-side optimization.

Core Features & Use Cases

Performance Optimization Guidance: Provides actionable patterns for reducing waterfalls, improving bundle size, optimizing server components, and minimizing unnecessary re-renders.
React and Next.js Best Practices: Covers modern React 19 and Next.js patterns including Server Components, caching strategies, Suspense usage, and efficient client-side data handling.
Use Case: Use this Skill when reviewing a Next.js application that has slow page loads, oversized bundles, inefficient data fetching, or avoidable component rendering costs.

Quick Start

Ask the AI to review my React or Next.js code for performance issues and apply the relevant best practices.

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 applications for performance issues?▼

Optimize React and Next.js applications by applying engineering patterns for rendering, data fetching, bundling, and server-side optimization to reduce waterfalls, bundle size, and unnecessary re-renders.

What are the best practices for reducing unnecessary re-renders in React?▼

Reducing unnecessary re-renders in React involves applying modern patterns for efficient asynchronous execution and optimized client-side data handling to minimize avoidable component rendering costs during code reviews.

How do I fix oversized bundles and slow page loads in Next.js?▼

Fixing oversized bundles and slow page loads in Next.js requires applying bundle optimization patterns and server components strategies to improve data fetching efficiency and overall client performance.

Does this approach work with modern React 19 and Next.js Server Components?▼

Yes, this approach works with modern React 19 and Next.js Server Components by providing technical requirements for caching strategies, Suspense usage, and efficient client-side data handling to tune performance.

When should I review my code for React performance bottlenecks?▼

You should review your code for React performance bottlenecks when experiencing slow page loads, oversized bundles, inefficient data fetching, or avoidable component rendering costs that impact user experience.