AgentSkillsCN

react-best-practices

本技能专为Tanstack Start应用而设，旨在优化React性能。在使用Tanstack Start、Tanstack Query和Tanstack Router编写、审查或重构React代码时，请优先选用此技能。适用于React组件、数据获取、包优化、性能提升、代码审查或重构等任务。

SKILL.md
--- frontmatter
name: react-best-practices
description: React performance optimization guidelines focused on Tanstack Start applications. Use when writing, reviewing, or refactoring React code with Tanstack Start, Tanstack Query, and Tanstack Router. Triggers on React components, data fetching, bundle optimization, performance improvements, code review, or refactoring tasks.
allowed-tools: Read, Grep, Glob

React Best Practices

Overview

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

When to Apply

Reference these guidelines when:

  • •Writing new React components or pages
  • •Implementing data fetching (client or server-side)
  • •Reviewing code for performance issues
  • •Refactoring existing React code
  • •Optimizing bundle size or load times

Priority-Ordered Guidelines

Rules are prioritized by impact:

PriorityCategoryImpact
1Eliminating WaterfallsCRITICAL
2Bundle Size OptimizationCRITICAL
3Server-Side PerformanceHIGH
4Client-Side Data FetchingMEDIUM-HIGH
5Re-render OptimizationMEDIUM
6Rendering PerformanceMEDIUM
7JavaScript PerformanceLOW-MEDIUM
8Advanced PatternsLOW

Quick Reference

Critical Patterns (Apply First)

Eliminate Waterfalls:

  • •Defer await until needed (move into branches)
  • •Use Promise.all() for independent async operations
  • •Start promises early, await late
  • •Use better-all for partial dependencies
  • •Use Suspense boundaries to stream content

Reduce Bundle Size:

  • •Avoid barrel file imports (import directly from source)
  • •Use React.lazy() and dynamic imports for heavy components
  • •Defer non-critical third-party libraries
  • •Preload based on user intent

High-Impact Server Patterns

  • •Use Tanstack Query for request deduplication and caching
  • •Use LRU cache for cross-request caching
  • •Minimize data serialization between server and client
  • •Parallelize data fetching with component composition and Tanstack Query

Medium-Impact Client Patterns

  • •Use Tanstack Query for automatic request deduplication
  • •Defer state reads to usage point
  • •Use lazy state initialization for expensive values
  • •Use derived state subscriptions
  • •Apply startTransition for non-urgent updates

Rendering Patterns

  • •Animate SVG wrappers, not SVG elements directly
  • •Use content-visibility: auto for long lists
  • •Prevent hydration mismatch with inline scripts
  • •Use explicit conditional rendering (? : not &&)

JavaScript Patterns

  • •Batch DOM CSS changes via classes
  • •Build index maps for repeated lookups
  • •Cache repeated function calls
  • •Use toSorted() instead of sort() for immutability
  • •Early length check for array comparisons

References

Full documentation with code examples is available in:

  • •references/react-performance-guidelines.md - Complete guide with all patterns
  • •references/tanstack-patterns.md - Tanstack Start, Query, and Router specific patterns
  • •references/rules/ - Individual rule files organized by category

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

code
grep -l "suspense" references/rules/
grep -l "barrel" references/rules/
grep -l "swr" references/rules/

Rule Categories in references/rules/

  • •async-* - Waterfall elimination patterns
  • •bundle-* - Bundle size optimization
  • •server-* - Server-side performance
  • •client-* - Client-side data fetching
  • •rerender-* - Re-render optimization
  • •rendering-* - DOM rendering performance
  • •js-* - JavaScript micro-optimizations
  • •advanced-* - Advanced patterns