skills.rest
RepairYourTech
RepairYourTechCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Optimize React performance with Server Components, bundle reduction, and re-render techniques.

6|1|Updated Feb 27, 2026
Search Tags:#architecture#performance#react#optimization#javascript#next.js#server components
One-click install
npx skills add https://github.com/RepairYourTech/cfsa-antigravity --skill react-best-practices-repairyourtech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/RepairYourTech/cfsa-antigravity/tree/main/.agent/skill-library/stack/ui/react-best-practices
Command: npx skills add https://github.com/RepairYourTech/cfsa-antigravity --skill react-best-practices-repairyourtech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the common challenges of building performant and scalable React applications, ensuring your applications are fast by default, not fast by accident.

Core Features & Use Cases

  • Performance Optimization: Covers techniques for reducing bundle size, optimizing re-renders, and improving JavaScript runtime performance.
  • Architecture Guidance: Provides best practices for Server Components, data fetching patterns, and error handling.
  • Modern React Features: Explains how to leverage React 19 features like use() and useOptimistic for better performance and user experience.
  • Use Case: When architecting a new Next.js application or refactoring an existing one to improve load times and responsiveness, consult this guide for best practices in data fetching, component rendering, and bundle management.

Quick Start

Consult the React Best Practices skill to optimize the rendering performance of your application's large lists.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I eliminate data fetching waterfalls in React Server Components?▼

React Server Components eliminate waterfalls by fetching data on the server before rendering, allowing parallel data fetching instead of sequential client-side requests that block the rendering pipeline.

What is the best way to optimize React re-renders and reduce bundle size?▼

Optimize React re-renders and reduce bundle size by isolating state to local components, leveraging Server Components to offload JavaScript execution, and implementing code splitting to minimize client-side payloads.

Can I use React 19 features like useOptimistic and use with Next.js Server Actions?▼

Yes, you can use React 19 features like `useOptimistic` and `use()` with Next.js Server Actions to manage optimistic UI updates and handle asynchronous data fetching for better runtime performance and user experience.

Does this React performance optimization guidance apply to frameworks other than Next.js?▼

This React performance optimization guidance primarily targets Next.js but applies to any RSC-capable framework, focusing on Server Component patterns, error boundaries, and JavaScript execution optimization.

How do I handle errors in React Server Components to prevent application crashes?▼

Handle errors in React Server Components by implementing error boundaries that catch unexpected runtime errors, allowing you to display fallback UI and preserve the rest of your application's rendering state.

Related Skills

Explore More Software Engineering Skills→
Aniket-a14Aniket-a14
1

vercel-react-best-practices

Codify React and Next.js performance optimization rules for code review and generation.

Community
Intermediate
phuonghxphuonghx
1

nextjs-react-expert

Optimize Next.js and React applications for data fetching, bundle size, and rendering performance.

Community
Advanced
zinohomezinohome
1

react-server-components

Implement React Server Components patterns with Next.js App Router for data fetching and streaming.

Community
Advanced
mustafazeydanimustafazeydani

vercel-react-best-practices

Optimize React and Next.js application performance with comprehensive guidelines.

Community
Advanced