react-best-practices

Name: react-best-practices
Author: mastra-ai

React performance optimization guidelines from Mastra Engineering. This skill should be used when writing, reviewing, or refactoring React code to ensure…

INSTALLATION

npx skills add https://github.com/mastra-ai/mastra --skill react-best-practices

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

React Best Practices

Overview

Comprehensive performance optimization guide for React applications, containing 12 rules across 6 categories. Rules are prioritized by impact to guide automated refactoring and code generation.

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

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:

Use Tanstack Query for automatic request deduplication (client-request-dedupe)

Re-render Optimization:

Use lazy state initialization for expensive values (rerender-lazy-state-init)

Apply startTransition for non-urgent updates (rerender-transitions)

Minimize useEffect function calls (rerender-useeffect-function-calls)

Rendering Patterns

Animate SVG wrappers, not SVG elements directly (rendering-animate-svg-wrapper)

Use content-visibility: auto for long lists (rendering-content-visibility)

JavaScript Patterns

Use Set/Map for repeated lookups (js-set-map-lookups)

Use toSorted() instead of sort() for immutability (js-tosorted-immutable)

Early length check for array comparisons (js-length-check-first)

References

Full documentation with code examples is available in:

references/react-best-practices-reference.md - Complete guide with all patterns

references/rules/ - Individual rule files organized by category

To look up a specific pattern, grep the rules directory:

grep -l "Promise.all" references/rules/

grep -l "barrel" references/rules/

grep -l "Tanstack" references/rules/

Rule Categories in references/rules/

async-* - Waterfall elimination (1 rule)

bundle-* - Bundle size optimization (2 rules)

client-* - Client-side data fetching (1 rule)

rerender-* - Re-render optimization (3 rules)

rendering-* - DOM rendering performance (2 rules)

js-* - JavaScript micro-optimizations (3 rules)