React Best Practices

What it does

Vercel’s React Best Practices is a prioritized rule collection for React and Next.js code. It emphasizes expensive problems such as sequential independent requests and unnecessary browser JavaScript before lower-impact micro-optimizations. Individual rule files provide the detailed rationale and patterns. It is a review and implementation aid, not an automatic profiler or a guarantee that every suggested pattern fits every framework version.

When to use it

• A dashboard waits for unrelated API calls one after another before showing content.
• A heavy component is included in the initial bundle even though most users never open it.
• State and effects trigger avoidable updates in an existing React feature.

Step-by-step workflow

1. Identify the affected route, framework version, server/client boundaries and observed performance symptom.
2. Review independent asynchronous operations and initial bundle size first. Do not serialize work that can safely run concurrently.
3. Inspect server fetching, cache scope and data passed to client components. Ensure performance changes preserve authentication and user-data isolation.
4. Apply rendering or re-render rules relevant to the code. Avoid adding memoization for trivial expressions without a reason.
5. Measure the same route before and after, checking loading behavior, bundle output and correctness. Read the relevant rule file rather than applying a heading mechanically.

Example request

Use vercel-react-best-practices to review our Next.js dashboard. Focus first on independent requests that are awaited sequentially and large client imports. Read the relevant rule files, propose the smallest corrections and preserve authentication and per-user data isolation. Compare the same route before and after using our existing build and measurement tools. Do not add memoization without identifying the work it saves.

Worked example

If account details and a public catalogue are independent, starting both requests before waiting can remove a waterfall. If the catalogue request depends on the account’s organization, parallelizing blindly is wrong. Likewise, caching a response globally can improve latency while leaking private data. Apply each rule with the actual dependency and security boundary in view.

What you get

Concrete code findings and targeted refactors, with measurements needed to validate improvements.

How to evaluate the result

• Expect concrete file references and targeted refactors with explanations tied to the affected rule.
• Compare network timing or bundle reports under consistent conditions. Do not infer a faster page merely from a familiar code pattern.
• Recheck authentication, cache isolation, error states and loading behavior. Confirm framework APIs match the installed version.

What you need

A React or Next.js project and an agent that can load Agent Skills instructions.

Setup and activation

The Vercel repository README documents installation through the skills CLI. Select a client that supports Agent Skills, inspect the chosen skill and supporting files, then follow that client’s installation path. Mention the skill name in a scoped request. Shared file format does not guarantee the same tools, network permissions or behavior across Claude Code, Codex and other clients. This page installs nothing. Before local installation, review and security-scan the exact source/version; catalogue inclusion is not security approval.

Limits and considerations

Use a different specialist for Vue, native SwiftUI or backend-only performance. A shared skills format does not establish tested compatibility with every agent. Not every app needs every rule, and micro-optimizations should not displace larger measured problems.

Related workflows

• Use frontend-testing-debugging to verify behavior after a refactor.
• Use Web Design Guidelines for UI quality issues beyond performance.

License and reuse

MIT, as declared in SKILL.md and repository.

Further reading

• Publisher setup and repository README
• Individual performance rules