# React Best Practices

React performance optimization guidelines from Mastra Engineering.

- Repository: https://github.com/mastra-ai/mastra (29259 stars)
- Category: Writing
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add mastra-ai/mastra --skill react-best-practices -g -a claude-code -y`
Codex: `npx skills add mastra-ai/mastra --skill react-best-practices -g -a codex -y`
Cursor: `npx skills add mastra-ai/mastra --skill react-best-practices -g -a cursor -y`
Gemini CLI: `npx skills add mastra-ai/mastra --skill react-best-practices -g -a gemini-cli -y`

## Description

React performance optimization guidelines from Mastra Engineering. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# React Best Practices

## Overview

Routing and priority guide for React performance and quality, containing 27 rules across 9 categories. Rule files hold the detailed explanations, examples, review smells, and impact metrics.

## When to Apply

Reference these guidelines when:

- Writing new React components
- Implementing data fetching
- Reviewing code for performance issues
- Refactoring existing React code
- Optimizing bundle size or load times

## Priority-Ordered Guidelines

Rules are prioritized by impact:

| Priority | Category                  | Impact                        |
| -------- | ------------------------- | ----------------------------- |
| 1        | Eliminating Waterfalls    | CRITICAL                      |
| 2        | Bundle Size Optimization  | CRITICAL                      |
| 3        | Client-Side Data Fetching | MEDIUM-HIGH                   |
| 4        | Re-render Optimization    | MEDIUM                        |
| 5        | Rendering Performance     | MEDIUM                        |
| 6        | JavaScript Performance    | LOW-MEDIUM                    |
| 7        | Component Structure       | MEDIUM-HIGH (maintainability) |
| 8        | Testing                   | MEDIUM-HIGH (correctness)     |
| 9        | Type Safety               | HIGH                          |

## Quick Reference

### Critical Patterns (Apply First)

**Eliminate Waterfalls:**

- Use `Promise.all()` for independent async operations (`async-parallel`)

**Reduce Bundle Size:**

- Avoid barrel file imports, import directly from source (`bundle-barrel-imports`)
- Defer non-critical third-party libraries (`bundle-defer-third-party`)

### Medium-Impact Patterns

**Client-Side Data Fetching:**

The rest: https://github.com/mastra-ai/mastra/blob/HEAD/.claude/skills/react-best-practices/SKILL.md