skills.rest
nazrulsoftwaredev
nazrulsoftwaredevCOMMUNITY
Explore all skills by this author →
GitHub

react-performance

Optimize React and Next.js performance by reducing waterfalls, bundle size, and re-renders.

Updated Jul 8, 2026
Search Tags:#performance#react#optimization#nextjs#code-review#web-vitals
One-click install
npx skills add https://github.com/nazrulsoftwaredev/NIT_CRM_2 --skill react-performance-nazrulsoftwaredev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/nazrulsoftwaredev/NIT_CRM_2/tree/main/.agents/skills/react-performance
Command: npx skills add https://github.com/nazrulsoftwaredev/NIT_CRM_2 --skill react-performance-nazrulsoftwaredev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses performance bottlenecks in React and Next.js applications, such as slow page loads, excessive re-renders, and bloated bundle sizes, by providing a structured set of optimization patterns.

Core Features & Use Cases

  • Performance Auditing: Provides a priority-based framework to diagnose and fix waterfalls, bundle size issues, and server-side rendering inefficiencies.
  • Optimization Patterns: Offers actionable guidance on implementing React 18/19 features like Suspense, Server Components, and memoization to improve Core Web Vitals.
  • Use Case: Use this skill when refactoring a slow-loading dashboard to identify unnecessary sequential data fetching and to implement efficient code-splitting strategies.

Quick Start

Use the react-performance skill to audit the current component structure for potential rendering bottlenecks and waterfall issues.

Frequently Asked Questions about react-performance

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

FAQPage Schema
How do I optimize React and Next.js application performance to improve Core Web Vitals?▼

Optimize React performance during code reviews by diagnosing waterfalls, bundle size issues, and rendering inefficiencies. The process provides a priority-based framework to implement React 18/19 features like Suspense, Server Components, and memoization for faster load times.

What causes excessive client-side re-renders in modern web applications, and how do I fix them?▼

Excessive client-side re-renders are caused by inefficient component structures and data fetching. Fix them by applying memoization patterns and utilizing Server Components to offload rendering work to the server, thereby reducing client-side rendering bottlenecks.

How do I reduce bundle size and fix network waterfalls when refactoring a slow-loading dashboard?▼

Yes, Next.js Server Components help reduce bundle size by executing rendering and data fetching on the server. This minimizes the JavaScript shipped to the client and reduces client-side re-renders, directly improving overall application performance.

When should I not use Suspense and Server Components for performance optimization?▼

You should reconsider using Suspense and Server Components if your application lacks the architectural complexity or high interactivity requirements that cause network waterfalls and rendering bottlenecks. Over-applying these patterns in simple static apps may add unnecessary structural complexity.

Related Skills

Explore More Software Engineering Skills→
Marcus-BoniMarcus-Boni
1

vercel-react-best-practices

Optimize React and Next.js application performance with best practices.

Community
Advanced
yash-gargyash-garg

web-perf

Analyze web performance bottlenecks and identify optimization opportunities using Chrome DevTools.

Community
Advanced
NextSpark-jsNextSpark-js

react-patterns

Guide React patterns for Next.js 15 applications with Server and Client Components.

Official
Intermediate
tuyenhttuyenht

performance-profiling

Audit web performance with Lighthouse and analyze JavaScript bundles.

Community
Intermediate