react-patterns_skill

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