react-best-practices

To optimize React and Next.js performance, apply parallel data fetching patterns and per-request caching. This minimizes waterfalls and improves Time to Interactive by fetching data concurrently instead of sequentially.

The best way to use Suspense in Next.js is wrapping asynchronous components to stream UI progressively. This pattern improves web vitals by showing fallback content immediately, reducing perceived load times and minimizing blocking.

To secure Next.js server actions when refactoring components, apply documented security guidelines and validate inputs. This ensures safe server-side mutations and protects against unauthorized access during data fetching operations.

Use dynamic imports and code splitting in React when you need to reduce heavy bundle sizes. This approach optimizes performance by loading components lazily, which significantly minimizes Time to Interactive for your application.

Yes, this approach works for writing, reviewing, and refactoring React components and Next.js pages. It systematically applies performance best practices across various data flows and bundle optimization tasks to ensure optimal web vitals.