What are 'waterfalls' in React apps?

Waterfalls occur when async operations run sequentially instead of in parallel; this skill helps you use Promise.all and other techniques to fix them.

How does this skill help with Next.js performance?

It provides specific implementation patterns for React Server Components (RSC), dynamic imports, and strategic Suspense boundaries to maximize server-side efficiency.

Is this skill suitable for beginners?

While it covers advanced optimizations, the clear 'Incorrect vs Correct' code comparisons make it an excellent learning tool for developers at all levels.

Can it help reduce my JavaScript bundle size?

Yes, it identifies performance-heavy patterns like barrel imports and suggests direct imports or lazy-loading to reduce the initial payload.

React Performance Best Practices

Name: React Performance Best Practices
Author: davila7

bydavila7

•

16,312

개발자 도구

Optimizes React and Next.js applications using over 40 performance rules to eliminate bottlenecks and minimize bundle sizes.

소개

This skill provides a comprehensive performance optimization framework for React and Next.js developers, drawing on elite engineering patterns to boost application speed. It empowers Claude to identify and resolve critical issues such as request waterfalls, excessive JavaScript payloads, and inefficient rendering cycles. Whether you are conducting a code review, refactoring complex components, or setting up a new Next.js project, this skill ensures your code follows high-impact standards for Core Web Vitals and seamless user experiences.

주요 기능

16,312 GitHub stars
Advanced bundle size reduction through dynamic imports and barrel file avoidance
Critical waterfall elimination via parallel data fetching and strategic Suspense
Server-Side performance optimization for RSC and data caching
Granular re-render minimization and memoization strategies
Browser rendering enhancements including CSS content-visibility and SVG optimization

사용 사례

Implementing efficient data-fetching patterns in Next.js App Router projects
Refactoring component architectures to prevent unnecessary re-renders
Auditing existing React applications to improve Time to Interactive (TTI) and LCP

소개

주요 기능

16,312 GitHub stars
Advanced bundle size reduction through dynamic imports and barrel file avoidance
Critical waterfall elimination via parallel data fetching and strategic Suspense
Server-Side performance optimization for RSC and data caching
Granular re-render minimization and memoization strategies
Browser rendering enhancements including CSS content-visibility and SVG optimization

사용 사례

Implementing efficient data-fetching patterns in Next.js App Router projects
Refactoring component architectures to prevent unnecessary re-renders
Auditing existing React applications to improve Time to Interactive (TTI) and LCP