skills.rest
lehuuhau1231
lehuuhau1231COMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Optimize React and Next.js applications for performance issues like waterfalls and bundle size.

Updated Aug 5, 2025
Search Tags:#code review#react#next.js#performance optimization#performance audit
One-click install
npx skills add https://github.com/lehuuhau1231/TechJobs --skill react-best-practices-lehuuhau1231
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/lehuuhau1231/TechJobs/tree/main/tech-job-client/.agent/skills/nextjs-react-expert
Command: npx skills add https://github.com/lehuuhau1231/TechJobs --skill react-best-practices-lehuuhau1231

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to optimizing React and Next.js applications, addressing common performance issues and improving load times.

Core Features & Use Cases

  • Eliminate Waterfalls: Identify and eliminate sequential data fetching patterns that cause delays.
  • Bundle Size Optimization: Reduce bundle size to improve Time to Interactive and Largest Contentful Paint.
  • Server-Side Performance: Enhance server-side rendering and API route optimization for faster response times.
  • Client-Side Data Fetching: Streamline data fetching with SWR and deduplication strategies.
  • Re-render Optimization: Minimize unnecessary re-renders and improve UI responsiveness.
  • Rendering Performance: Optimize rendering bottlenecks with virtualization and image optimization techniques.
  • JavaScript Performance: Apply micro-optimizations to hot paths for incremental improvements.
  • Advanced Patterns: Implement advanced React patterns and caching strategies for complex scenarios.

Quick Start

Run the 'react-best-practices' skill to get a comprehensive guide on optimizing your React and Next.js application performance.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I optimize React and Next.js application performance?▼

Optimize React and Next.js performance by eliminating data fetching waterfalls, reducing bundle size, and enhancing server-side rendering to improve load times and UI responsiveness.

What causes unnecessary re-renders in React and how do I fix them?▼

Unnecessary re-renders in React are minimized by applying advanced rendering patterns and virtualization techniques to optimize rendering bottlenecks and improve UI responsiveness.

How do I reduce bundle size to improve Largest Contentful Paint?▼

Reduce bundle size to improve Time to Interactive and Largest Contentful Paint by applying bundle size optimization techniques and streamlining client-side data fetching with SWR.

Do I need prior React and Next.js knowledge to use these optimization guidelines?▼

Yes, applying these React and Next.js performance optimization recommendations requires existing React and Next.js knowledge to address waterfalls, server-side rendering, and advanced patterns effectively.

What's the best way to handle sequential data fetching waterfalls in Next.js?▼

The best way to handle sequential data fetching waterfalls in Next.js is identifying sequential patterns causing delays and streamlining client-side data fetching with SWR and deduplication strategies.

When should I apply JavaScript micro-optimizations for React rendering bottlenecks?▼

Apply JavaScript micro-optimizations to hot paths for incremental improvements after addressing major rendering bottlenecks with virtualization and image optimization techniques.

Related Skills

Explore More Software Engineering Skills→
JaylaelikeJaylaelike

react-best-practices

Identify performance bottlenecks in React/Next.js projects and apply optimization rules.

Community
Advanced
keshavraj936keshavraj936

react-best-practices

Optimize React and Next.js applications by eliminating waterfalls and reducing bundle size.

Community
Advanced
yutnayutna
2

nextjs-data-access

Orchestrate server and client data fetching with SWR in Next.js apps.

Community
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

react-best-practices

Identify and correct React and Next.js performance issues in code reviews.

Community
Advanced