home / skills / kienhaminh / anti-chaotic / react

react skill

safe

This skill helps you optimize React and Next.js performance by applying Vercel best practices across components, pages, and data fetching.

This is most likely a fork of the frontend-developer skill from kienhaminh

npx playbooks add skill kienhaminh/anti-chaotic --skill react

Review the files below or copy the command above to add this skill to your agents.

Files (49)

SKILL.md

5.3 KB

---
name: react-nextjs
description: React and Next.js performance optimization guidelines from Vercel Engineering. Sub-skill of frontend-developer. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
license: MIT
metadata:
  parent-skill: frontend-developer
  author: vercel
  version: "1.0.0"
  type: sub-skill
---

# Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

## 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

## Rule Categories by Priority

| Priority | Category                  | Impact      | Prefix       |
| -------- | ------------------------- | ----------- | ------------ |
| 1        | Eliminating Waterfalls    | CRITICAL    | `async-`     |
| 2        | Bundle Size Optimization  | CRITICAL    | `bundle-`    |
| 3        | Server-Side Performance   | HIGH        | `server-`    |
| 4        | Client-Side Data Fetching | MEDIUM-HIGH | `client-`    |
| 5        | Re-render Optimization    | MEDIUM      | `rerender-`  |
| 6        | Rendering Performance     | MEDIUM      | `rendering-` |
| 7        | JavaScript Performance    | LOW-MEDIUM  | `js-`        |
| 8        | Advanced Patterns         | LOW         | `advanced-`  |

## Quick Reference

### 1. Eliminating Waterfalls (CRITICAL)

- `async-defer-await` - Move await into branches where actually used
- `async-parallel` - Use Promise.all() for independent operations
- `async-dependencies` - Use better-all for partial dependencies
- `async-api-routes` - Start promises early, await late in API routes
- `async-suspense-boundaries` - Use Suspense to stream content

### 2. Bundle Size Optimization (CRITICAL)

- `bundle-barrel-imports` - Import directly, avoid barrel files
- `bundle-dynamic-imports` - Use next/dynamic for heavy components
- `bundle-defer-third-party` - Load analytics/logging after hydration
- `bundle-conditional` - Load modules only when feature is activated
- `bundle-preload` - Preload on hover/focus for perceived speed

### 3. Server-Side Performance (HIGH)

- `server-cache-react` - Use React.cache() for per-request deduplication
- `server-cache-lru` - Use LRU cache for cross-request caching
- `server-serialization` - Minimize data passed to client components
- `server-parallel-fetching` - Restructure components to parallelize fetches
- `server-after-nonblocking` - Use after() for non-blocking operations

### 4. Client-Side Data Fetching (MEDIUM-HIGH)

- `client-swr-dedup` - Use SWR for automatic request deduplication
- `client-event-listeners` - Deduplicate global event listeners

### 5. Re-render Optimization (MEDIUM)

- `rerender-defer-reads` - Don't subscribe to state only used in callbacks
- `rerender-memo` - Extract expensive work into memoized components
- `rerender-dependencies` - Use primitive dependencies in effects
- `rerender-derived-state` - Subscribe to derived booleans, not raw values
- `rerender-functional-setstate` - Use functional setState for stable callbacks
- `rerender-lazy-state-init` - Pass function to useState for expensive values
- `rerender-transitions` - Use startTransition for non-urgent updates

### 6. Rendering Performance (MEDIUM)

- `rendering-animate-svg-wrapper` - Animate div wrapper, not SVG element
- `rendering-content-visibility` - Use content-visibility for long lists
- `rendering-hoist-jsx` - Extract static JSX outside components
- `rendering-svg-precision` - Reduce SVG coordinate precision
- `rendering-hydration-no-flicker` - Use inline script for client-only data
- `rendering-activity` - Use Activity component for show/hide
- `rendering-conditional-render` - Use ternary, not && for conditionals

### 7. JavaScript Performance (LOW-MEDIUM)

- `js-batch-dom-css` - Group CSS changes via classes or cssText
- `js-index-maps` - Build Map for repeated lookups
- `js-cache-property-access` - Cache object properties in loops
- `js-cache-function-results` - Cache function results in module-level Map
- `js-cache-storage` - Cache localStorage/sessionStorage reads
- `js-combine-iterations` - Combine multiple filter/map into one loop
- `js-length-check-first` - Check array length before expensive comparison
- `js-early-exit` - Return early from functions
- `js-hoist-regexp` - Hoist RegExp creation outside loops
- `js-min-max-loop` - Use loop for min/max instead of sort
- `js-set-map-lookups` - Use Set/Map for O(1) lookups
- `js-tosorted-immutable` - Use toSorted() for immutability

### 8. Advanced Patterns (LOW)

- `advanced-event-handler-refs` - Store event handlers in refs
- `advanced-use-latest` - useLatest for stable callback refs

## How to Use

Read individual rule files for detailed explanations and code examples:

```
rules/async-parallel.md
rules/bundle-barrel-imports.md
rules/_sections.md
```

Each rule file contains:

- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Additional context and references

## Full Compiled Document

For the complete guide with all rules expanded: `AGENTS.md`

Overview

This skill provides React and Next.js performance optimization guidelines distilled from Vercel Engineering best practices. It organizes 45 actionable rules across categories like eliminating waterfalls, bundle-size reduction, server-side performance, and re-render optimization. The guidance is prioritized by impact to help automated refactoring and targeted code generation. Use it to make components and pages faster, smaller, and more resilient under load.

How this skill works

The skill inspects tasks that mention React components, Next.js pages, data fetching, bundle optimization, or performance improvements and maps them to prioritized rules. It recommends concrete fixes such as parallelizing async work, dynamic imports for heavy modules, caching strategies on the server, and re-render guards on the client. For each suggested rule it provides rationale, a common anti-pattern, and a corrected approach to apply during code generation or review. The rules are grouped by impact so automated agents focus on the highest-return changes first.

When to use it

When creating new React components or Next.js pages to follow performance-first patterns
During code review to identify and fix performance regressions or anti-patterns
When implementing or refactoring data fetching (server and client)
While optimizing bundle size and load times for production builds
When tuning client rendering, re-renders, or JavaScript hotspots

Best practices

Eliminate waterfalls: start promises early and await late; parallelize independent fetches with Promise.all()
Optimize bundles: import directly, use next/dynamic for heavy components, defer third-party scripts after hydration
Improve server perf: use React.cache() per-request and LRU for cross-request caching; minimize serialized data to clients
Reduce re-renders: memoize expensive components, use primitive effect deps, and prefer functional state updates
Client fetch patterns: deduplicate requests (SWR or similar) and avoid duplicate global listeners
Rendering fixes: hoist static JSX, use content-visibility for long lists, and avoid SVG precision bloat

Example use cases

Refactor a page that sequentially fetches multiple APIs into parallel fetches to cut TTFB
Convert a heavy admin widget to a dynamic import and preload on hover to reduce initial bundle
Introduce server-side caching and smaller props payloads to speed SSR and reduce client hydration work
Replace repeated expensive computations with memoized child components to lower re-render cost
Switch duplicate client requests to SWR for automatic deduplication and cache consistency

FAQ

Which rules should I run first?

Start with high-impact categories: eliminate waterfalls and bundle-size optimizations, then server-side caching, followed by client fetch improvements and re-render optimizations.

Can these rules be applied automatically?

Many recommendations are automatable (e.g., replacing sequential awaits, converting imports to dynamic) but require context-aware changes; review autogenerated patches before merging.