react-best-practices_skill

Overview

This skill codifies React and Next.js performance optimization patterns to apply before writing any React code. It prioritizes eliminating waterfalls, reducing bundle size, and improving server- and client-side fetch strategies. Use it as a pre-implementation checklist and a source of concrete code patterns.

How this skill works

The skill inspects planned data flows, component boundaries, and import strategies to identify common anti-patterns (sequential awaits, barrel imports, large client bundles). It prescribes targeted fixes: Promise.all for independent fetches, dynamic imports for heavy components, narrow serialization across RSC boundaries, and composition that enables parallel data fetching. It also recommends client-side tools like SWR and state/update patterns to minimize re-renders and JS work.

When to use it

• Before implementing or refactoring any React or Next.js page or component
• When designing server/client data boundaries or RSC props to avoid over-serialization
• When adding heavy third-party libraries or large components like editors or charts
• When addressing slow page TTI, LCP, or high bundle size
• When multiple components independently fetch data and may create waterfalls

Best practices

• Avoid sequential awaits for independent operations; use Promise.all() to parallelize
• Import directly from source files, not barrel files, to reduce module loading
• Lazy-load heavy components via dynamic imports and preload on user intent
• Pass only required fields at RSC boundaries to minimize serialization
• Use functional state updates and narrow effect dependencies to prevent extra re-renders
• Use SWR or similar for client-side deduplication and cached fetches

Example use cases

• Building a dashboard with multiple independent data panels—compose as parallel RSCs and wrap heavy panels in Suspense
• Adding Monaco editor or large charting library—load with next/dynamic and ssr: false, preload on hover
• Refactoring a slow page—replace sequential fetches with Promise.all and hoist static JSX
• Optimizing API-heavy server handlers—use React.cache() for per-request deduplication and after() for non-blocking logs
• Improving list rendering—use content-visibility, build index maps (Set/Map) for lookups, and lazy state initialization