react best practices for 2026 - By Sourav Mishra (@souravvmishra)

a simple breakdown of vercel's latest guide on how to actually make react apps fast.

BySourav Mishra2 min read

vercel just dropped a massive guide on react best practices. after building apps for years, they've figured out what actually matters.

here's the simple version of what you need to know.

the order matters

most people try to optimize the wrong things. they obsess over useMemo while their app is shipping 300KB of unused code.

here is the order you should care about:

  1. fix waterfalls (super important)
  2. shrink your bundle size (also super important)
  3. server-side speed
  4. client-side fetching
  5. re-render optimization (do this last!)

if you fix the first two, your app is already fast.


1. stop the waterfalls

a "waterfall" is when you fetch user data, wait for it, and then fetch their posts. it's super slow.

❌ don't do this:

async function Profile({ id }) {
  const user = await fetchUser(id); // waits...
  const posts = await fetchPosts(user.id); // waits again...
  return <View user={user} posts={posts} />;
}

✅ do this instead: fetch them at the same time if they don't depend on each other.

async function Profile({ id }) {
  const userPromise = fetchUser(id);
  const postsPromise = fetchPosts(id);

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

2. shrink your bundle

the fastest code is the code that doesn't exist.

big bundles make your app freeze before the user can click anything.

  • ditch big libraries: use small stuff like date-fns instead of moment.js.
  • avoid barrel files: index.ts files that export everything can accidentally load your whole codebase into the browser.
  • keep client boundaries low: don't put 'use client' at the very top of your app.

3. do it on the server

if you can do the heavy lifting on the server, do it.

  • talk to your database directly in server components.
  • keep your api keys safe.
  • do all the hard math before sending it to the user's browser.

what to remember

stop worrying about re-renders until you've checked your network tab for waterfalls!

start with the big stuff (architecture, network) before you mess with the small stuff (memoization).


written by sourav mishra, trying to build faster apps.

Share this post

Cover image for react best practices for 2026

You might also like

See all