🇺🇸English

React Refactor Best Practices

Architectural refactoring guide for React applications. Contains 40 rules across 7 categories, prioritized by impact from critical (component and state architecture) to incremental (refactoring safety).

When to Apply

• Refactoring existing React codebases or planning large-scale restructuring
• Reviewing PRs for architectural issues and code smells
• Decomposing oversized components into focused units
• Extracting reusable hooks from component logic
• Improving testability of React code
• Reducing coupling between feature modules

Rule Categories

Quick Reference

Critical patterns — get these right first:

• Use compound components instead of props explosion
• Colocate state with the components that use it
• Use state machines for complex UI workflows
• Separate container logic from presentational components

Common mistakes — avoid these anti-patterns:

• Lifting state to App when only one component reads it
• Using context for rapidly-changing values
• Monolithic hooks that fetch + transform + cache
• Testing implementation details instead of behavior

Table of Contents

1. Component Architecture — CRITICAL
   • 1.1 Apply Interface Segregation to Component Props — CRITICAL (prevents 30-50% of unnecessary re-renders)
   • 1.2 Colocate Files by Feature Instead of Type — CRITICAL (reduces cross-directory navigation by 70%)
   • 1.3 Convert Render Props to Custom Hooks — CRITICAL (eliminates 2-4 levels of nesting)
   • 1.4 Extract Headless Components for Logic Reuse — CRITICAL (5x more reuse scenarios)
   • 1.5 Prefer Composition Over Props Explosion — CRITICAL (reduces prop count by 50-70%)
   • 1.6 Separate Container Logic from Presentational Components — CRITICAL (enables independent testing)
   • 1.7 Use Compound Components for Implicit State Sharing — CRITICAL (reduces API surface by 60%)
   • 1.8 Push Client Boundaries to Leaf Components — HIGH (keeps 60-80% server-rendered)

References

1. https://react.dev
2. https://react.dev/learn/thinking-in-react
3. https://kentcdodds.com/blog/application-state-management-with-react
4. https://testing-library.com/docs/guiding-principles
5. https://patterns.dev

Related Skills

• For React 19 API best practices, see react skill
• For application performance optimization, see react-optimise skill
• For client-side form handling, see react-hook-form skill

Weekly Installs

101

Repository

pproenca/dot-skills

GitHub Stars

86

First Seen

Feb 11, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

codex96

opencode94

gemini-cli93

github-copilot92

cursor89

kimi-cli87