react-best-practices

Optimize React and Next.js application performance with data fetching and bundle size strategies.

Updated Feb 19, 2026
One-click install
npx skills add https://github.com/sustinbebustin/.dotfiles --skill react-best-practices-sustinbebustin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/sustinbebustin/.dotfiles/tree/main/home/.claude/skills/react-best-practices
Command: npx skills add https://github.com/sustinbebustin/.dotfiles --skill react-best-practices-sustinbebustin

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses common performance bottlenecks in React and Next.js applications, ensuring faster load times, smoother interactions, and more efficient resource utilization.

Core Features & Use Cases

  • Performance Optimization: Provides actionable rules and best practices for improving React/Next.js app performance.
  • Bundle Size Reduction: Offers strategies to minimize JavaScript bundle sizes.
  • Server-Side Performance: Guides on optimizing data fetching and rendering on the server.
  • Client-Side Efficiency: Details techniques for efficient client-side rendering and data handling.
  • Use Case: A developer can use this Skill to review their Next.js application's data fetching logic, identify potential waterfalls, and refactor it for parallel execution, significantly reducing server response times.

Quick Start

Apply the react-best-practices skill to optimize the data fetching strategy in the provided Next.js page component.

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 data fetching in Next.js to eliminate request waterfalls?

To optimize data fetching in Next.js and eliminate waterfalls, refactor sequential requests into parallel execution, significantly reducing server response times and improving application performance.

What is the best way to reduce JavaScript bundle size in a React application?

Reducing JavaScript bundle size in React involves applying specific optimization strategies and best practices to minimize unnecessary code, ensuring faster load times and more efficient resource utilization.

How do server components affect React rendering performance?

Server components affect React rendering performance by optimizing server-side data fetching and rendering, which reduces the client-side JavaScript required and enhances overall application efficiency.

Why does my React application experience excessive re-renders and how do I fix it?

Excessive re-renders in React can be fixed by applying targeted re-render optimization techniques, ensuring smoother client-side interactions and more efficient client-side data handling.

Can I use these React performance best practices for both client-side and server-side rendering?

Yes, these React performance best practices apply to both client-side and server-side rendering, offering comprehensive guidelines for efficient data handling and rendering optimization across your application architecture.

What are the limitations of optimizing Next.js performance through bundle size reduction?

Limitations of optimizing Next.js performance through bundle size reduction include the need to balance code-splitting strategies with maintaining critical rendering paths, ensuring reduced load times do not degrade user experience.