react-best-practices

Identify and fix performance bottlenecks in React/Next.js projects.

Updated Mar 18, 2026

Search Tags:#performance #react #optimization #rendering #next.js #best-practices

Ready to run

npx skills add https://github.com/bpteam/coder --skill react-best-practices-bpteam

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance regressions due to inconsistent patterns across components and data fetching. This skill provides a centralized collection of best practices to optimize rendering, reduce bundle sizes, and improve server/client interactions.

Core Features & Use Cases

Standardized rules for Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, and Rendering Performance.
Practical examples and actionable guidelines for building high-performance React apps.
Use Cases: code reviews, refactors, and onboarding teams to maintain performance discipline.

Quick Start

Review the rules in the react-best-practices skill and apply the recommended patterns to your codebase.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema

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

Fix React rendering bottlenecks by applying established best practices for component design and re-render optimization. This skill provides actionable guidelines to identify performance regressions and enforce safe rendering patterns across your application.

What's the best way to eliminate data fetching waterfalls in Next.js applications?▼

Eliminate data fetching waterfalls in Next.js by enforcing rules for parallel data fetching and caching. This skill standardizes server-side performance and client-side fetching patterns to prevent sequential request delays in production-ready code.

How do I optimize bundle size and server rendering performance in a React project?▼

Optimize bundle size and server rendering performance by applying standardized rules for server-side rendering and bundle optimization. This skill provides practical examples to improve server and client interactions while reducing overall bundle footprint.

Can I use these React performance patterns for both client-side and server-side contexts?▼

Yes, you can use these React performance patterns across both client and server contexts. The skill enforces guidelines for server rendering, client-side data fetching, and component design to maintain performance discipline throughout your entire stack.

Why does my Next.js app suffer from performance regressions after refactoring components?▼

Next.js performance regressions often occur due to inconsistent patterns across components and data fetching. Applying centralized best practices for rendering, parallel fetching, and caching helps standardize performance and prevent regressions during code refactors.