Individual skill

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

skills/react-best-practices/SKILL.md

Read pinned source

Source commit 3ae17b2c765ed8534ba9c6f848563db127fc4ca6

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Network or broad shell
Last checked: Nov 7, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 4,701
Repository last updated: Nov 7, 2026
License: MIT

Observed agent integration: codex

ai Repository topic
ai-agent Repository topic
ai-agent-tools Repository topic
claude Repository topic
claude-ai Repository topic
claude-api Repository topic
claude-code Repository topic
claude-code-communication Repository topic
claude-commands Repository topic
claude-desktop Repository topic
engineering Derived category
writing Derived category
data Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

AGENTS.mddoc · 81,336 bytes
README.mddoc · 3,369 bytes
SKILL.mdcore · 6,357 bytes
metadata.jsonasset · 921 bytes
rules/_sections.mddoc · 1,538 bytes
rules/_template.mddoc · 631 bytes
rules/advanced-event-handler-refs.mddoc · 1,483 bytes
rules/advanced-init-once.mddoc · 958 bytes
rules/advanced-use-latest.mddoc · 1,071 bytes
rules/async-api-routes.mddoc · 1,113 bytes
rules/async-defer-await.mddoc · 2,008 bytes
rules/async-dependencies.mddoc · 1,294 bytes
rules/async-parallel.mddoc · 646 bytes
rules/async-suspense-boundaries.mddoc · 2,506 bytes
rules/bundle-barrel-imports.mddoc · 2,372 bytes
rules/bundle-conditional.mddoc · 959 bytes
rules/bundle-defer-third-party.mddoc · 919 bytes
rules/bundle-dynamic-imports.mddoc · 790 bytes
rules/bundle-preload.mddoc · 1,120 bytes
rules/client-event-listeners.mddoc · 1,982 bytes
rules/client-localstorage-schema.mddoc · 1,975 bytes
rules/client-passive-event-listeners.mddoc · 1,636 bytes
rules/client-swr-dedup.mddoc · 1,161 bytes
rules/js-batch-dom-css.mddoc · 3,239 bytes
rules/js-cache-function-results.mddoc · 1,931 bytes
rules/js-cache-property-access.mddoc · 532 bytes
rules/js-cache-storage.mddoc · 1,640 bytes
rules/js-combine-iterations.mddoc · 759 bytes
rules/js-early-exit.mddoc · 1,129 bytes
rules/js-hoist-regexp.mddoc · 1,026 bytes
rules/js-index-maps.mddoc · 847 bytes
rules/js-length-check-first.mddoc · 1,748 bytes
rules/js-min-max-loop.mddoc · 2,278 bytes
rules/js-set-map-lookups.mddoc · 532 bytes
rules/js-tosorted-immutable.mddoc · 1,782 bytes
rules/rendering-activity.mddoc · 564 bytes
rules/rendering-animate-svg-wrapper.mddoc · 1,119 bytes
rules/rendering-conditional-render.mddoc · 936 bytes
rules/rendering-content-visibility.mddoc · 817 bytes
rules/rendering-hoist-jsx.mddoc · 989 bytes
rules/rendering-hydration-no-flicker.mddoc · 2,242 bytes
rules/rendering-hydration-suppress-warning.mddoc · 850 bytes
rules/rendering-svg-precision.mddoc · 588 bytes
rules/rendering-usetransition-loading.mddoc · 2,070 bytes
rules/rerender-defer-reads.mddoc · 973 bytes
rules/rerender-dependencies.mddoc · 824 bytes
rules/rerender-derived-state-no-effect.mddoc · 1,201 bytes
rules/rerender-derived-state.mddoc · 727 bytes
rules/rerender-functional-setstate.mddoc · 2,976 bytes
rules/rerender-lazy-state-init.mddoc · 2,000 bytes
rules/rerender-memo-with-default-value.mddoc · 1,171 bytes
rules/rerender-memo.mddoc · 1,148 bytes
rules/rerender-move-effect-to-event.mddoc · 1,268 bytes
rules/rerender-simple-expression-in-memo.mddoc · 1,018 bytes
rules/rerender-transitions.mddoc · 1,055 bytes
rules/rerender-use-ref-transient-values.mddoc · 1,742 bytes
rules/server-after-nonblocking.mddoc · 2,002 bytes
rules/server-auth-actions.mddoc · 2,638 bytes
rules/server-cache-lru.mddoc · 1,353 bytes
rules/server-cache-react.mddoc · 2,225 bytes
rules/server-dedup-props.mddoc · 2,064 bytes
rules/server-parallel-fetching.mddoc · 1,554 bytes
rules/server-serialization.mddoc · 1,000 bytes

Read excerpt


# Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 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