react-performance

Applies 70+ prioritized React and Next.js performance optimization rules during code writing and review.

5|15|Updated Jul 8, 2026

Search Tags:#code review #react #web vitals #bundle size #performance optimization #nextjs #server components

Ready to run

npx skills add https://github.com/clfigueiredo/hermes-infra-skills --skill react-performance-clfigueiredo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/clfigueiredo/hermes-infra-skills/tree/main/.hermes/skills/curso-hermes/react-performance
Command: npx skills add https://github.com/clfigueiredo/hermes-infra-skills --skill react-performance-clfigueiredo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React and Next.js applications often suffer from slow page loads, large bundles, excessive re-renders, and data-fetching waterfalls, and developers lack a structured checklist to diagnose and fix these issues systematically. ## Core Features & Use Cases - Prioritized Rule Catalog: Organizes 70+ optimization rules across 8 priority categories, from critical waterfall elimination and bundle size reduction down to advanced patterns like useEffectEvent and stable refs. - Code Review Guidance: Provides INCORRECT/CORRECT code pairs for Server Components, Server Actions, SWR/TanStack Query fetching, memoization, and rendering patterns, plus a Lighthouse Web Vitals mapping (LCP, INP, CLS, TBT). - Use Case: When reviewing a Next.js pull request with slow first-load JS, use this Skill to identify barrel imports, sequential awaits in Server Components, and missing dynamic imports, then apply the recommended fixes. ## Quick Start Review my Next.js page component for performance issues using the react-performance rules and suggest fixes for any waterfalls or bundle size problems.

Frequently Asked Questions about react-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix data fetching waterfalls in Next.js Server Components?▼

Replace sequential awaits with Promise.all for independent requests, or split sibling fetches into separate child components so React runs them in parallel. You can also start promises early and await them only where the result is used.

How to reduce first-load JavaScript bundle size in Next.js?▼

Use direct imports instead of barrel index files, enable Next.js Optimize Package Imports, and lazy-load heavy components with next/dynamic. Defer third-party scripts with next/script using afterInteractive or lazyOnload strategies.

When should I use useMemo and useCallback in React?▼

Use them only for expensive computations or to preserve object identity for memoized children, not for simple primitives. If the project ships React Compiler, manual memoization becomes unnecessary since the compiler handles it automatically.

Does React.cache work across multiple requests?▼

No, React.cache deduplicates calls only within a single server request render. For cross-request caching of stable data like config or lookup tables, use an LRU cache or Next.js unstable_cache instead.

Why does my React component re-render too often?▼

Common causes include subscribing to entire store objects instead of derived booleans, passing new object or array literals as props, and defining components inside other components. Select primitive or derived values and hoist static defaults to fix this.