react-best-practices

Start independent promises immediately and await them together with Promise.all, or use better-all for partial dependency chains. In API routes, kick off auth and config fetches before awaiting, and use Suspense boundaries so layout renders while data streams in.

Import directly from source files instead of barrel entry points, since libraries like lucide-react or MUI can load thousands of unused modules. In Next.js 13.5+, enable optimizePackageImports to transform barrel imports automatically at build time.

Derive state during rendering instead of effects, use functional setState updates, narrow effect dependencies to primitives, and extract expensive work into memoized components. Use useDeferredValue or startTransition for non-urgent updates to keep inputs responsive.

The skill flags styled-components, Emotion, MUI, and Chakra as legacy CSS-in-JS and recommends shadcn/ui with Tailwind for better SSR performance and Vercel ecosystem alignment. The warning is skipped if your project already uses shadcn or Tailwind.

Avoid Suspense when data drives layout decisions, when content is SEO-critical above the fold, or when queries are small and fast enough that the overhead is not worth it. It trades faster initial paint for potential layout shift.