frontend-react-best-practices

Review React components against performance and code quality guidelines.

Updated Mar 10, 2026
One-click install
npx skills add https://github.com/aleeM42/crm-2jmcmedios --skill frontend-react-best-practices-aleem42
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-react-best-practices
Source: https://github.com/aleeM42/crm-2jmcmedios/tree/main/.agents/skills/frontend-react-best-practices
Command: npx skills add https://github.com/aleeM42/crm-2jmcmedios --skill frontend-react-best-practices-aleem42

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines to optimize React component performance, reduce bundle sizes, and improve overall application efficiency.

Core Features & Use Cases

  • Performance Optimization: Rules for minimizing re-renders, optimizing bundle loading, and efficient state management.
  • Code Quality: Best practices for hooks, component composition, and avoiding common pitfalls.
  • Use Case: When developing a new React feature, consult these guidelines to ensure components are performant, bundles are lean, and the code follows established best practices for maintainability and speed.

Quick Start

Review the provided rules to refactor the current React component for better performance.

Frequently Asked Questions about frontend-react-best-practices

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

FAQPage Schema
How do I optimize React performance and reduce unnecessary component re-renders?

Optimize React performance by applying specific rules for minimizing re-renders, efficient state management, and proper component composition. These guidelines ensure components are performant and bundles remain lean during feature development.

What are the best practices for React hooks usage and component composition?

React hooks best practices involve structured guidelines for proper usage and avoiding common pitfalls. Component composition rules enhance code maintainability and ensure established patterns are followed for application efficiency.

How do I reduce bundle size when optimizing a React application?

Reduce React bundle size by following optimization guidelines for bundle loading and rendering performance. These rules target lean bundles and improved application speed during feature development and refactoring.

Can I use these React optimization guidelines to refactor an existing codebase?

You can use these React optimization guidelines to refactor existing components for better performance. Review the provided rules to ensure components are performant, bundles are lean, and code follows established best practices.

What is the best way to manage state efficiently in React to prevent slow rendering?

Efficient React state management requires following specific rules for minimizing re-renders and optimizing rendering performance. These guidelines help improve overall application speed and enhance code maintainability.

Why does my React application have a large bundle size and slow rendering performance?

Slow React rendering and large bundle sizes often stem from unoptimized component composition and inefficient state management. Apply comprehensive optimization guidelines covering bundle loading and re-render efficiency to resolve these issues.