Individual skill

react-best-practices

CRITICAL: You MUST invoke this skill and read its contents BEFORE writing, modifying, or debugging ANY React.js or Next.js code. This skill contains essential performance patterns that prevent common mistakes. Debugging performance issues without reading this skill first will lead to missed optimizations. Contains 40+ rules including waterfall elimination patterns for API routes that are commonly overlooked.

tasks/react-performance-debugging/environment/skills/react-best-practices/SKILL.md

Read pinned source

Source commit f860ecf02ef53412a030f8661c83d644b739ff01

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 9, 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): 1,914
Repository last updated: Nov 4, 2026
License: Apache-2.0

Observed agent integration: codex

benchmark Repository topic
skillsbench Repository topic
writing Derived category
testing Derived category
engineering 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,364 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