React Performance

What it does

This skill provides systematic guidance for optimizing the performance of React and Next.js applications. It focuses on identifying and addressing common bottlenecks, prioritizing improvements based on their impact. The core principle is to reduce blocking operations and minimize bundle size to improve initial load times and overall responsiveness. This helps developers build faster frontend user interfaces and better user experiences.

When to use it

• When experiencing slow page load times or sluggish interactions in a React/Next.js application.
• During code reviews to identify potential performance issues.
• As part of a proactive effort to optimize an existing codebase for improved efficiency.
• When introducing new features that might impact the overall performance of the application.
• To understand and implement best practices for asynchronous operations and component loading.

Key capabilities

• Eliminate Waterfalls: Identifies and resolves sequential async operations, suggesting parallel execution where possible.
• Suspense Streaming: Provides guidance on using <Suspense> to stream data and render the shell instantly while slow data loads.
• Partial Dependencies: Explains how to handle promises with partial dependencies to start independent work immediately.
• Bundle Size Optimization: Offers techniques for reducing bundle size, including direct imports and dynamic imports.
• Deferred Script Loading: Demonstrates how to defer the loading of non-critical third-party scripts after hydration.
• Preload on Intent: Suggests preloading resources based on user interactions like hovering or focusing.

Example prompts

• "How can I parallelize these fetch calls in my Next.js component?"
• "What's the best way to use Suspense Streaming for a slow data section?"
• "I'm seeing large bundle sizes; how can I optimize them?"

Tips & gotchas

• The skill prioritizes addressing sequential asynchronous operations first, as these are often the biggest performance bottlenecks.
• Be mindful of ssr: false when using dynamic imports – this prevents server-side rendering for client-only components.
• Direct imports are preferred over barrel files to ensure tree-shaking and reduce bundle size.