Individual skill

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.

cli-tool/components/skills/development/react-best-practices/SKILL.md

Read pinned source

Source commit ad81bf053f80b626801decf425f501ba49983d98

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 4, 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): 33,188
Repository last updated: Nov 7, 2026
License: MIT

Observed agent integration: codex

anthropic Repository topic
anthropic-claude Repository topic
claude Repository topic
claude-code Repository topic
agent-skills Repository topic
ai-agents Repository topic
claude-code-plugins Repository topic
cli Repository topic
mcp Repository topic
registry 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 · 60,535 bytes
README.mddoc · 3,360 bytes
SKILL.mdcore · 5,250 bytes
metadata.jsonasset · 921 bytes
rules/_sections.mddoc · 1,554 bytes
rules/_template.mddoc · 631 bytes
rules/advanced-event-handler-refs.mddoc · 1,478 bytes
rules/advanced-use-latest.mddoc · 1,191 bytes
rules/async-api-routes.mddoc · 1,125 bytes
rules/async-defer-await.mddoc · 2,028 bytes
rules/async-dependencies.mddoc · 942 bytes
rules/async-parallel.mddoc · 654 bytes
rules/async-suspense-boundaries.mddoc · 2,510 bytes
rules/bundle-barrel-imports.mddoc · 2,370 bytes
rules/bundle-conditional.mddoc · 866 bytes
rules/bundle-defer-third-party.mddoc · 920 bytes
rules/bundle-dynamic-imports.mddoc · 791 bytes
rules/bundle-preload.mddoc · 1,149 bytes
rules/client-event-listeners.mddoc · 1,969 bytes
rules/client-swr-dedup.mddoc · 1,159 bytes
rules/js-batch-dom-css.mddoc · 1,902 bytes
rules/js-cache-function-results.mddoc · 1,949 bytes
rules/js-cache-property-access.mddoc · 532 bytes
rules/js-cache-storage.mddoc · 1,651 bytes
rules/js-combine-iterations.mddoc · 753 bytes
rules/js-early-exit.mddoc · 1,133 bytes
rules/js-hoist-regexp.mddoc · 1,028 bytes
rules/js-index-maps.mddoc · 837 bytes
rules/js-length-check-first.mddoc · 1,752 bytes
rules/js-min-max-loop.mddoc · 2,105 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,185 bytes
rules/rendering-conditional-render.mddoc · 980 bytes
rules/rendering-content-visibility.mddoc · 815 bytes
rules/rendering-hoist-jsx.mddoc · 1,039 bytes
rules/rendering-hydration-no-flicker.mddoc · 2,308 bytes
rules/rendering-svg-precision.mddoc · 588 bytes
rules/rerender-defer-reads.mddoc · 973 bytes
rules/rerender-dependencies.mddoc · 824 bytes
rules/rerender-derived-state.mddoc · 724 bytes
rules/rerender-functional-setstate.mddoc · 2,968 bytes
rules/rerender-lazy-state-init.mddoc · 2,016 bytes
rules/rerender-memo.mddoc · 1,148 bytes
rules/rerender-transitions.mddoc · 1,055 bytes
rules/server-after-nonblocking.mddoc · 2,012 bytes
rules/server-cache-lru.mddoc · 1,353 bytes
rules/server-cache-react.mddoc · 681 bytes
rules/server-parallel-fetching.mddoc · 1,515 bytes
rules/server-serialization.mddoc · 996 bytes

Read excerpt


# 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