$ ~/registry/skill/affaan-m-react-performance

SKILL

react-performance

Name: react-performance
Author: affaan-m

Optimize React and Next.js performance during coding, review, and refactoring.

Stars

★ 229,796

Source

GitHub

Updated

2026-07-15

// securityLow risk

Prompt only, no code
Open source
Community-trusted· 229.8k

Running security audit…

Credentials
Network egress
Code execution
Data access
Supply chain

// install

Copy the install command and let the AI configure it · recommended for beginners

Please install the "react-performance" skill from askskill:
1. Download https://raw.githubusercontent.com/affaan-m/ECC/main/skills/react-performance/SKILL.md
2. Save it as ~/.claude/skills/react-performance/SKILL.md
3. Reload skills and tell me it's ready

// download

Download SKILL.mdInstall manifest ↗

// examples

Review page load performance

Prompt

Review this Next.js page for performance issues. Prioritize problems such as request waterfalls, oversized bundles, and inefficient server/client data fetching, then provide optimization recommendations and code examples.

Expected

A prioritized list of performance issues with explanations, optimization steps, and sample code.

Refactor a frequently re-rendering component

Prompt

This React component feels sluggish. Analyze what causes frequent re-renders, then refactor it using performance best practices and explain the benefit and trade-offs of each change.

Expected

An analysis of re-render causes, an optimized component version, and explanations for each performance change.

Create a performance optimization checklist

Prompt

Create a performance optimization checklist for a React/Next.js project. Cover waterfalls, rendering strategy, client fetching, bundle size, JS micro-performance, and advanced optimizations, organized by priority.

Expected

A structured performance checklist for code reviews, engineering guidelines, or refactoring plans.

// docs

React Performance

Performance optimization patterns for React 18/19 and Next.js, adapted from Vercel Labs react-best-practices (MIT, v1.0.0). This skill organizes rules by priority and provides decision-tree guidance for active code review and refactoring.

When to Activate

Writing or reviewing React/Next.js code for performance
Diagnosing slow page loads, slow interactions, or high CPU on the client
Auditing bundle size or Lighthouse Core Web Vitals regressions
Removing waterfalls in Server Components / API routes
Reducing client-side re-renders
Optimizing long lists, animations, or hydration
Auditing optimization choices in PRs touching app/, pages/, components/, or data layers

Priority Index

Priority	Category	Prefix	When it matters
1 — CRITICAL	Eliminating Waterfalls	`async-`	Anytime `await` is followed by independent `await`
2 — CRITICAL	Bundle Size Optimization	`bundle-`	First-load JS, route-level imports, third-party libs
3 — HIGH	Server-Side Performance	`server-`	RSC, Server Actions, API routes, SSR
4 — MEDIUM-HIGH	Client-Side Data Fetching	`client-`	SWR / TanStack Query / raw `fetch` in hooks
5 — MEDIUM	Re-render Optimization	`rerender-`	High-frequency state updates, parent-child fan-out
6 — MEDIUM	Rendering Performance	`rendering-`	Long lists, animations, hydration
7 — LOW-MEDIUM	JavaScript Performance	`js-`	Hot loops, frequent allocations
8 — LOW	Advanced Patterns	`advanced-`	Effect-event integration, stable refs

1. Eliminating Waterfalls (CRITICAL)

"Waterfalls are the #1 performance killer" — every sequential await adds full network latency.

Cheap conditions before await

Check sync conditions (props, env, hardcoded flags) before awaiting remote data.

// INCORRECT
async function Page({ id }: { id: string }) {
  const flag = await getFlag("show-page");
  if (!flag || !id) return null;
  const data = await getData(id);
  // ...
}

// CORRECT — short-circuit on cheap sync condition first
async function Page({ id }: { id: string }) {
  if (!id) return null;
  const flag = await getFlag("show-page");
  if (!flag) return null;
  const data = await getData(id);
}

Defer awaits until used

Move await into the branch that uses it.

// INCORRECT — awaits before deciding it needs the data
const user = await getUser(id);
if (mode === "guest") return renderGuest();
return renderUser(user);

// CORRECT
if (mode === "guest") return renderGuest();
const user = await getUser(id);
return renderUser(user);

Promise.all for independent work

// INCORRECT — sequential
const user = await getUser(id);
const posts = await getPosts(id);
const followers = await getFollowers(id);

// CORRECT — parallel
const [user, posts, followers] = await Promise.all([
  getUser(id),
  getPosts(id),
  getFollowers(id),
]);

Partial dependencies — start early, await late

// CORRECT — kick off all promises, await only when each result is needed
const userP = getUser(id);
const postsP = getPosts(id);
const profile = await getProfile(id);
if (profile.private) return null;
const [user, posts] = await Promise.all([userP, postsP]);

Suspense for streaming

Push <Suspense> boundaries close to the data so the page paints what it can while slower sub-trees stream in. The trade-off: layout shift when content arrives — reserve space (skeleton or min-height).

Server Components: parallel through composition

// INCORRECT — sibling awaits run sequentially inside one component
export default async function Page() {
  const user = await getUser();
  const cart = await getCart();
  return <View user={user} cart={cart} />;
}

// CORRECT — split into children, React runs them in parallel
export default async function Page() {
  return (
    <View>

…

View full docs ↗