react-best-practices

Optimize React and Next.js performance by applying parallel data fetching, direct imports, and Suspense boundaries. This skill diagnoses bottlenecks like slow hydration and bloated bundles to guide actionable, non-blocking improvements for faster Time to Interactive.

Prevent unnecessary React component re-rendering by applying memoization and selective component composition. This skill provides actionable rules to diagnose rendering bottlenecks and implement safe optimizations for improved client-side responsiveness.

Memoization optimizes Next.js server-side performance by caching expensive computations and preventing redundant renders. This skill applies memoization alongside parallel data fetching and caching to ensure safe, non-blocking improvements across server components.

Yes, you can reduce bundle size and improve client-side data fetching by applying direct imports and parallel data fetching. This skill diagnoses bundle bloat and data waterfall issues, proposing actionable optimizations to achieve faster rendering.

You need Suspense boundaries when addressing slow hydration and rendering waterfalls in React. This skill guides you in applying Suspense alongside parallel data fetching to achieve safe, non-blocking improvements and a faster Time to Interactive.