react-best-practices

Apply React performance optimization rules to components, hooks, and UI patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides React performance optimization guidelines to improve rendering efficiency, reduce unnecessary re-renders, and optimize bundle patterns across React projects.

Core Features & Use Cases

  • Rules Coverage: 47 rules across 8 categories addressing bundle size, re-render optimization, component composition, and accessibility.
  • Practical Scenarios: guidance for creating, reviewing, and refactoring React components, hooks, and patterns to minimize waste and improve UX.
  • Real-World Examples: best-practice patterns for memoization, code-splitting, and composition strategies that scale with large apps.

Quick Start

  • Apply the React Best Practices guidelines as you write or review components; reference the SKILL.md sections for rules and examples.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I reduce unnecessary re-renders in React components?▼

React performance optimization guidelines help reduce unnecessary re-renders by enforcing memoization strategies, component composition rules, and rendering efficiency patterns. This skill provides 47 rules across 8 categories to minimize waste during component creation, review, and refactoring.

What is the best way to optimize React bundle size?▼

The best way to optimize React bundle size is through code-splitting and composition strategies that scale with large apps. This skill provides best-practice patterns and rules for bundle size optimization, reducing unnecessary imports and improving loading efficiency.

When should I use memoization in React hooks and UI patterns?▼

Memoization in React hooks and UI patterns should be used when minimizing re-renders and optimizing rendering efficiency. This skill provides real-world examples and best-practice patterns for applying memoization effectively across components during refactoring.

Does this React performance guidance cover accessibility considerations?▼

Yes, this React performance guidance covers accessibility considerations alongside bundle size and re-render optimization. The 47 rules across 8 categories include accessibility rules to ensure optimized components maintain proper accessibility standards during creation and review.

Can I use these React optimization rules for refactoring existing codebases?▼

Yes, you can use these React optimization rules for refactoring existing codebases. The guidelines apply to creating, reviewing, and refactoring React components, hooks, and related UI patterns, providing best-practice patterns that scale with large applications.