Get the FREE Ultimate OpenClaw Setup Guide →

react-best-practices

Scanned
npx machina-cli add skill tylergibbs1/codewarden/react-best-practices --openclaw
Files (1)
SKILL.md
2.9 KB

React Best Practices

Overview

Performance optimization guide for React and Next.js applications, ordered by impact. Apply these patterns when writing or reviewing code to maximize performance gains.

When to Apply

Reference these guidelines when:

  • Writing new React components or Next.js pages
  • Implementing data fetching (client or server-side)
  • Reviewing code for performance issues
  • Refactoring existing React/Next.js 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:

  • 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 next/dynamic for heavy components
  • Defer non-critical third-party libraries
  • Preload based on user intent

High-Impact Server Patterns

  • Use React.cache() for per-request deduplication
  • Use LRU cache for cross-request caching
  • Minimize serialization at RSC boundaries
  • Parallelize data fetching with component composition

Medium-Impact Client Patterns

  • Use SWR for automatic request deduplication
  • Defer state reads to usage point
  • Use derived state subscriptions
  • Apply startTransition for non-urgent updates

References

Full documentation with code examples is available in:

  • references/react-performance-guidelines.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 "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

Source

git clone https://github.com/tylergibbs1/codewarden/blob/main/skills/react-best-practices/SKILL.mdView on GitHub

Overview

This performance guide for React and Next.js is ordered by impact and helps you optimize components, pages, and data flows. Apply these patterns when writing, reviewing, or refactoring code to maximize performance and minimize load times.

How This Skill Works

The skill categorizes optimization patterns by impact and provides concrete techniques for both server and client. Practitioners implement the guidelines by prioritizing high-impact patterns, then layering in caching, parallel data fetching, and smarter rendering to realize measurable gains.

When to Use It

  • When writing new React components or Next.js pages
  • When implementing data fetching (client or server-side)
  • When reviewing code for performance issues
  • When refactoring existing React/Next.js code
  • When optimizing bundle size or load times

Quick Start

  1. Step 1: Audit components and pages to identify high-impact patterns (waterfalls, bundle size, server-side bottlenecks).
  2. Step 2: Apply top patterns: Promise.all for independent calls, next/dynamic for heavy components, SWR for data fetching, and startTransition for non-urgent updates; remove barrel imports.
  3. Step 3: Measure impact with Lighthouse or Next.js analytics, compare before/after, and iterate on findings.

Best Practices

  • Eliminate waterfalls: use Promise.all for independent async work, start promises early, and structure calls to avoid sequential delays.
  • Reduce bundle size: avoid barrel file imports, import directly from source, and use next/dynamic for heavy components.
  • Optimize server-side performance: leverage React.cache for per-request deduplication, apply an LR U cache for cross-request caching, and minimize serialization at RSC boundaries.
  • Improve client data fetching: adopt SWR for automatic request deduplication and cache management, and parallelize data fetching via component composition.
  • Improve rendering performance: defer non-urgent state reads, use derived state subscriptions, and apply startTransition for non-urgent updates.

Example Use Cases

  • Refactor a dashboard to fetch multiple endpoints with Promise.all and render a loading boundary to avoid waterfalls.
  • Replace barrel imports with direct imports and progressively lazy-load heavy components using next/dynamic.
  • Cache frequently requested data across requests with a cross-request cache and React.cache to reduce server reruns.
  • Introduce SWR for client data fetching to deduplicate requests and keep UI synchronized with minimal re-fetching.
  • Use startTransition to throttle non-urgent updates and defer non-critical state reads to improve perceived performance.

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗