react-best-practices

Provide centralized React performance guidelines for reviews, refactors, and code generation.

27.1k|2.6k|Updated Aug 6, 2024
One-click install
npx skills add https://github.com/mastra-ai/mastra --skill react-best-practices-mastra-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/mastra-ai/mastra/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/mastra-ai/mastra --skill react-best-practices-mastra-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Inconsistent React performance practices across teams are addressed through a centralized set of proven guidelines that standardize how code is written, reviewed, and evolved.

Core Features & Use Cases

  • Comprehensive rules: a catalog of patterns across categories to guide refactoring and automation.
  • References & guidance: examples and reference materials to support both humans and AI agents.
  • Use Case: when starting a React project or performing code reviews, apply these guidelines to improve load times and responsiveness.

Quick Start

Review the React Best Practices reference and implement suggested patterns in your codebase to reduce renders and improve performance.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I standardize React performance practices across my team?

To standardize React performance practices, apply a centralized set of proven guidelines covering component design, data fetching, and bundle optimization. This provides a reference of rules and practical examples to guide consistent code reviews and refactoring decisions.

What React optimization patterns should I follow to reduce unnecessary renders?

To reduce unnecessary React renders, follow proven best practice guidelines for component design and data fetching. These references provide practical patterns and examples that help standardize how your code is written and evolved for better load times.

Can I use these React best practices for refactoring an existing project?

Yes, these React best practices are applicable to both new and existing projects. You can reference the catalog of optimization patterns to guide refactoring tasks, improve load times, and resolve inconsistent performance issues across your current codebase.

What is the best way to automate React code reviews for performance issues?

The best way to automate React code reviews is by using a frontmatter-driven knowledge unit of proven rules. This reference provides practical examples that automation tools can reference to standardize code generation and identify performance optimizations.

Does this React performance guide cover bundle optimization and data fetching?

Yes, this React performance guide covers bundle optimization and data fetching. It provides a comprehensive catalog of patterns across these categories to guide refactoring, improve load times, and support both human reviewers and AI agents.

When do I need a centralized set of React performance guidelines?

You need centralized React performance guidelines when your team faces inconsistent practices and requires standardized rules for writing, reviewing, and evolving code. Applying these references during project setup or code reviews resolves performance inconsistencies.