playbooks

home / skills / srbhr / resume-matcher / react-patterns

react-patterns skill

/.claude/skills/react-patterns

This skill helps optimize React and Next.js performance for local or docker deployments by applying Vercel best practices and patterns.

npx playbooks add skill srbhr/resume-matcher --skill react-patterns

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

Files (2)
SKILL.md
3.2 KB
---
name: react-patterns
description: React and Next.js performance optimization guidelines from Vercel Engineering, tuned for local/offline or docker-deployed apps.
license: MIT
metadata:
  author: vercel
  version: "1.0.0"
  focus: local-offline-docker
---

# Vercel React Best Practices (Local/Docker)

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. This version highlights the most important patterns for local installs or dockerized deployments.

## Purpose

Provide a high-signal checklist to avoid async waterfalls, reduce client payloads, and keep UI responsive without relying on hosted or edge-specific optimizations.

## When to Apply

- Building or refactoring React components or Next.js pages
- Implementing Server Actions, Route Handlers, or data fetching
- Reducing startup time or memory footprint for local installs
- Debugging sluggish UI or long hydration times
- Reviewing code for performance regressions

## Offline and Docker Focus

- Optimize for cold-start and steady-state responsiveness over SEO.
- Use in-process caches because the server process persists.
- Avoid sequential awaits even for local APIs or databases.
- Defer non-critical work until after render or after responses are sent.
- Minimize RSC props to reduce hydration and memory overhead.

## Top Findings

- Eliminate async waterfalls by starting work early and awaiting late with `Promise.all` or `better-all`.
- Use Suspense boundaries to stream UI instead of blocking the whole page on data.
- Reduce initial load and memory via dynamic imports, conditional loading, and direct imports.
- Minimize RSC payloads; pass only fields used and avoid duplicating serialized data.
- Cache hot server work: `React.cache` per request and LRU for cross-request reuse.
- Reduce client work with memoized subtrees, lazy state init, transitions, and `content-visibility` for large lists.

## Core Patterns

- `async-parallel` and `async-api-routes` to eliminate waterfalls
- `async-suspense-boundaries` to stream slow sections
- `bundle-barrel-imports` and `bundle-dynamic-imports` to reduce startup cost
- `server-serialization` and `server-dedup-props` to shrink RSC payloads
- `server-cache-react` and `server-cache-lru` to reuse hot work
- `rerender-lazy-state-init` and `rerender-transitions` for responsive UI
- `rendering-content-visibility` for long lists
- `client-swr-dedup` for fetch deduplication

## Outputs

- `REACT_PATTERNS.md` for a condensed, offline-focused guide
- `AGENT.md` for the full compiled reference

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

## How to Use

Start with `REACT_PATTERNS.md` for the condensed guidance.

## Full Compiled Document

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

Overview

This skill distills Vercel Engineering’s React and Next.js performance patterns into a practical, offline-focused guide for local and Docker deployments. It emphasizes eliminating async waterfalls, shrinking client payloads, and keeping UIs responsive without relying on hosted edge features. The guidance is tuned for cold-starts, in-process caching, and reduced memory use in persistent server processes.

How this skill works

The skill inspects common performance anti-patterns and prescribes concrete fixes: parallelizing async work, using Suspense boundaries for streaming, minimizing RSC serialization, and caching hot server work. It recommends bundle and import strategies, client-side rendering controls, and small-surface server props to reduce hydration cost. Patterns are prioritized so you can apply the highest-impact changes first.

When to use it

  • Building or refactoring React components and Next.js pages for local or containerized deployment
  • Diagnosing slow startup, long hydration times, or sluggish UI interactions
  • Implementing Server Actions, Route Handlers, or local API/database calls
  • Reducing memory usage and payload size in persistent server processes
  • Reviewing code for performance regressions before release

Best practices

  • Avoid sequential awaits: start async work early and await late with Promise.all or helper libraries
  • Stream slow sections with Suspense boundaries instead of blocking full-page renders
  • Minimize RSC props: pass only required fields and avoid duplicated serialized data
  • Use dynamic imports, barrel import hygiene, and conditional loading to cut startup cost
  • Cache hot server computations with React.cache per-request and LRU for cross-request reuse
  • Reduce client work with memoized subtrees, lazy state initialization, transitions, and content-visibility

Example use cases

  • Refactor a Next.js page that blocks on multiple sequential API calls into parallel requests with Suspense fallbacks
  • Trim server-to-client payloads for a resume-matching app by serializing only fields needed for initial render
  • Add in-process caching in a Docker-deployed service to avoid repeating expensive vector-search or embedding work
  • Lower initial bundle size by converting rarely used modules to dynamic imports in a TypeScript app
  • Improve perceived responsiveness by converting eager state setup into lazy initialization and transitions

FAQ

Will these patterns still help if I deploy to a hosted edge platform later?

Yes. The core patterns—eliminating waterfalls, reducing payloads, and caching hot work—improve performance regardless of environment, though edge-specific optimizations can provide additional wins.

How do I decide between per-request React.cache and an LRU cross-request cache?

Use per-request React.cache for idempotent, cheap memoization tied to a render. Use LRU when work is expensive and safe to share across requests, such as reused embeddings or DB query results.