Question 1

How do I eliminate data fetching waterfalls in Next.js?

Accepted Answer

Start independent async operations immediately and await them together with Promise.all(), or use better-all for partial dependency chains. In component trees, restructure so sibling components fetch in parallel instead of awaiting in a parent before rendering children.

Question 2

How to reduce bundle size from libraries like lucide-react or MUI?

Accepted Answer

Import directly from source files instead of barrel entry points, which can load thousands of unused modules. In Next.js 13.5+, enable optimizePackageImports in next.config.js to transform barrel imports automatically at build time.

Question 3

When should I use React.cache() versus an LRU cache?

Accepted Answer

React.cache() deduplicates calls within a single request, ideal for auth checks and database queries in one render pass. Use an LRU cache when data must persist across sequential requests, such as repeated user actions hitting multiple endpoints.

Question 4

Does this guide apply to React apps without Next.js?

Accepted Answer

Most rules apply to any React codebase, including re-render optimization, JavaScript performance, and client-side fetching patterns. Next.js-specific rules cover Server Actions, RSC serialization, next/dynamic, and the after() API.

Question 5

Why does my conditional render display 0 in React?

Accepted Answer

Using && with a numeric condition renders the falsy value 0 or NaN as text. Use an explicit ternary like count > 0 ? <Badge /> : null so nothing renders when the condition fails.

vercel-react-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-react-best-practices

Related Skills

vercel-react-best-practices

optimize

refactor

optimizing-with-react-compiler