React Best Practices: Optimization Beyond the Basics

Vercel recently released a comprehensive guide on React Best Practices. After 10+ years of building with React and Next.js, they've distilled optimization into a structured approach that actually moves the needle.

Here is a breakdown of the core concepts that every React developer should know in 2026.

The Core Idea: Ordering Matters

Most performance optimization fails because we start at the wrong level. We obsess over useMemo or micro-optimizations in a loop while our app is shipping 300KB of unused JavaScript or waiting on a massive waterfall.

Vercel proposes a specific order of operations for performance work. You can't optimize your way out of a bad architecture with useCallback.

The Hierarchy of Performance

1. Eliminate Waterfalls (Critical)
2. Reduce Bundle Size (Critical)
3. Server-side Performance
4. Client-side Data Fetching
5. Re-render Optimization

If you fix the first two, you often solve 80% of your performance issues.

1. Eliminate Async Waterfalls

A "waterfall" happens when requests depend on each other sequentially.

Bad Pattern: Fetching user data, waiting for it to finish, and then fetching their posts.

// ❌ Don't do this
async function UserProfile({ id }) {
  const user = await fetchUser(id); // Wait...
  const posts = await fetchPosts(user.id); // Wait again...
  return <Profile user={user} posts={posts} />;
}

Good Pattern: Fetch both in parallel if they don't strictly depend on each other's data for the request.

// ✅ Do this
async function UserProfile({ id }) {
  // Start both immediately
  const userPromise = fetchUser(id);
  const postsPromise = fetchPosts(id);

  const [user, posts] = await Promise.all([userPromise, postsPromise]);
  return <Profile user={user} posts={posts} />;
}

In Server Components, this is even easier because you can just await the promises where you need the data, or use Promise.all.

2. Reduce Bundle Size

The fastest code is code that doesn't exist.

Large bundles delay interacting with your app (TBT - Total Blocking Time).

Common Offenders

• Large Libraries: using moment.js (huge) instead of date-fns (modular) or native Intl.
• Barrel Files: index.ts files that export everything can accidentally import your entire codebase into a client component.
• Client Components: Marking a huge parent component as 'use client' forces everything imported by it to also be sent to the client. Keep the "client boundary" as low as possible in the tree.

3. Server-side Performance

Move work to the server where possible.

• Database calls: access your DB directly in Server Components.
• Secrets: Keep API keys safe without exposing them to the browser.
• Heavy computations: Run expensive logic on the server so the user's device doesn't have to.

4. How to Use These Practices

Vercel has packaged these best practices into a set of "Agent Skills". This allows you to automatically enforce these rules using AI coding assistants.

Using with AI Agents

If you are using an agentic workflow (like Cursor, Claude Code, or custom scripts), you can install the skill directly:

npx add-skill vercel-labs/agent-skills

Once installed, your agent will be context-aware of these performance patterns. When it reviews your code, it can spot:

• Cascading useEffect calls.
• Heavy client-side imports.
• Unoptimized data fetching patterns.

This ensures that performance isn't just an afterthought but is baked into the development lifecycle.

Conclusion

The biggest takeaway from Vercel's guide isn't a specific code trick—it's the mindset. stop analyzing re-renders until you've checked your network tab for waterfalls and your bundle analyzer for bloat.

Start with the macro (architecture, network), then move to the micro (code, memoization).

Check out the full guide on Vercel: Introducing: React Best Practices