react-performance

Review React and Next.js code for performance bottlenecks using Vercel's priority rules.

Updated Mar 26, 2026

Search Tags:#performance #react #async #nextjs #waterfall #bundle-size #server-rendering

Ready to run

npx skills add https://github.com/johnnystefan/test-saas-business --skill react-performance-johnnystefan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/johnnystefan/test-saas-business/tree/main/skills/react-performance
Command: npx skills add https://github.com/johnnystefan/test-saas-business --skill react-performance-johnnystefan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Addresses React and Next.js performance bottlenecks such as sequential data-fetching waterfalls, oversized bundles, and re-render inefficiencies by providing a prioritized set of operational rules curated by Vercel.

Core Features & Use Cases

Priority rule catalog: Covers 69 actionable rules across waterfall elimination, bundle sizing, server-side optimization, client fetching, re-render fixes, rendering tweaks, JavaScript performance, and advanced patterns.
Guided application: Helps engineers refactor new or existing admin and customer components, pages, and data fetchers to follow best practices and avoid hydration regressions.
Real-world scenario: When the admin dashboard suffers from slow hydration and redundant fetches, follow the async and bundle rules to parallelize fetching, defer heavy modules, and tighten render dependencies.

Quick Start

Review the customer mobile experience to eliminate data fetching waterfalls and reduce bundle size.

Frequently Asked Questions about react-performance

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

FAQPage Schema

How do I fix sequential data fetching waterfalls in React and Next.js?▼

To fix sequential data fetching waterfalls in React and Next.js, you parallelize async operations and tighten render dependencies using prioritized operational rules. This systematic review of server-client responsibilities eliminates redundant fetches and accelerates load times.

What is the best way to reduce React bundle size for customer experiences?▼

The best way to reduce React bundle size is to apply bundle splitting rules, defer heavy modules, and systematically review bundle weight. Following these practices optimizes component rewrites and avoids oversized bundles for faster customer mobile experiences.

Why does my Next.js admin dashboard suffer from slow hydration?▼

Your Next.js admin dashboard suffers from slow hydration due to render inefficiencies and sequential data fetching. Applying targeted async and bundle rules to parallelize fetching and defer heavy modules resolves these hydration regressions and improves performance.

Can I use server-side rendering patterns to optimize React performance?▼

Yes, you can use server-side rendering patterns to optimize React performance by applying rules for server-side optimization and client fetching. This approach ensures proper server-client responsibilities and prevents hydration regressions for faster load times.

How do I eliminate re-render inefficiencies in existing React components?▼

To eliminate re-render inefficiencies in existing React components, you apply a catalog of actionable rules covering rendering tweaks and JavaScript performance. This refactoring process tightens render dependencies and complies with best practice priority rules.