react-best-practices

Provide React performance, composition, and API design guidelines.

Updated Apr 5, 2026

Search Tags:#performance #react #optimization #components #patterns #composition

Ready to run

npx skills add https://github.com/harryy2510/dotclaude --skill react-best-practices-harryy2510

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive collection of React performance guidelines and composition patterns to help teams write faster, more maintainable components and reduce bundle size.

Core Features & Use Cases

Performance heuristics: rules for eliminating waterfalls, memoization strategies, and efficient rendering.
Composition patterns: approaches for building flexible, reusable component APIs with compound components and context.
Use Case: when enhancing a large React app, use these patterns to audit and refactor components for speed and clarity.

Quick Start

Apply the React best-practices guidance to your current project to optimize performance and improve component composition.

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 reduce unnecessary component re-renders?▼

Optimize React performance by applying memoization strategies, eliminating data waterfalls, and following efficient rendering heuristics. These guidelines help teams refactor components to reduce bundle size and improve rendering speed across large applications.

What are the best React composition patterns for building reusable component APIs?▼

Use compound components and context to build flexible, reusable React composition patterns. These approaches enable development teams to create maintainable component APIs for large apps, libraries, and design systems.

How do I refactor a large React app for better speed and maintainability?▼

Refactor large React apps by auditing components against structured performance heuristics and composition guidelines. Apply rules for eliminating waterfalls and memoization strategies to improve both speed and code clarity.

Does this React best practices guidance cover React 19 API design?▼

Yes, the guidance includes specific React 19 API design recommendations. It specifies requirements for performance rules, composition patterns, and API guidance organized as structured sections with examples and recommended practices.

When should I use memoization strategies in React components?▼

Apply memoization strategies when optimizing React components to prevent unnecessary re-renders and eliminate data waterfalls. The guidelines provide specific rules for when memoization delivers meaningful performance gains across large apps.

Can I use these React composition patterns for design systems and libraries?▼

Yes, these composition patterns apply directly to building design systems and libraries. The guidelines help teams write faster, more maintainable components with flexible APIs using compound components and context.