react-best-practices

To optimize React and Next.js performance, you apply established best practices across data fetching, bundle reduction, and rendering patterns. This skill analyzes components and pages to return a prioritized list of changes improving TTI and LCP.

Preventing unnecessary React rerenders involves applying memoization and stable rendering patterns across client and server boundaries. The skill provides actionable rules to guide code generation and refactoring for stable UI rendering.

Fixing data fetching waterfalls in Next.js requires applying established async best practices. The skill targets data fetching strategies to identify waterfalls and returns actionable guidance to optimize parallel data loading.

Yes, these React optimization rules apply across both client and server component boundaries. The skill provides categorized guidance for server, client, and rendering patterns to ensure scalable, high-performance code execution.

Reducing large JavaScript bundles in Next.js is achieved through code-splitting and bundle optimization rules. The skill analyzes your project and recommends prioritized changes to minimize bundle size and improve load times.

Memoization in React components should be used when optimizing rendering performance and preventing unstable renders. The skill provides a curated, rule-based guide to determine exactly when and how to apply memoization effectively.