Potasse

React & Next.js performance

Vercel Engineering's React best practices as questions: waterfalls, bundle size, server rendering, re-renders and the hot-path details that add up.

Add to library

Try a card

React & Next.js performance1 of 3

Your code does if (await getFlag() && someCondition). What should you reorder, and why?

Say it in your head first.

Questions

  1. 01Your code does if (await getFlag() && someCondition). What should you reorder, and why?
  2. 02A function awaits fetchUserData() first thing, but one early-return branch never uses the data. What's the fix?
  3. 03How should three independent awaits in a row be rewritten?
  4. 04profile needs user, but config is independent. How do you keep profile from waiting on config?
  5. 05In an API route or Server Action, when should independent operations like auth() and fetchConfig() start?
  6. 06An async page awaits its data before returning any JSX, so the whole layout waits. What's the alternative?
  7. 07When should you not push data behind a Suspense boundary?
  8. 08How can two components under one Suspense boundary share data with a single fetch?

…and 79 more cards. The answers are yours to find.