skills.rest
sustinbebustin
sustinbebustinCOMMUNITY
Explore all skills by this author →
GitHub

rules-of-react

Enforce React's 10 mandatory correctness rules for purity, immutability, and hook call sites.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers understand and adhere to React's fundamental correctness rules, preventing bugs, ensuring predictable behavior, and enabling optimizations by the React Compiler.

Core Features & Use Cases

  • Purity & Immutability: Enforces rules for component purity, side effect handling, and immutability of props, state, and hook arguments.
  • Hook Rules: Ensures hooks are called correctly at the top level and only from React functions.
  • Use Case: When refactoring a complex React component, use this Skill to verify that all purity and hook rules are followed, preventing potential runtime errors and enabling React Compiler optimizations.

Quick Start

Review the provided React code snippet to ensure it adheres to the 10 rules of React.

Frequently Asked Questions about rules-of-react

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

FAQPage Schema
What are React's mandatory rules for component purity and hook call-site restrictions?▼

React's 10 mandatory rules enforce component purity, immutability of props and state, and top-level hook invocation to prevent unpredictable renders and runtime errors.

How do I check if my React code follows immutability and purity best practices?▼

Review your React code against the 10 correctness rules to verify side effect handling, immutability of hook arguments, and proper hook invocation patterns for predictable behavior.

Why does the React Compiler bail out of optimizing my components?▼

The React Compiler bails out when components violate correctness rules regarding purity, immutability, or hook call-site restrictions, preventing automated optimizations.

Can I use React correctness rules to verify refactored components during code reviews?▼

Yes, applying React's 10 correctness rules during code reviews and refactoring ensures all components adhere to purity and hook patterns, preventing potential runtime errors.

What happens if I call React hooks conditionally instead of at the top level?▼

Calling React hooks conditionally violates the mandatory hook call-site restrictions, breaking component purity rules and causing unpredictable renders and runtime bugs.

When do I need to enforce React's purity and immutability rules in my application?▼

You need to enforce React's purity and immutability rules for all new components, during refactoring, and in code reviews to ensure predictable behavior and enable React Compiler optimizations.

Related Skills

Explore More Software Engineering Skills→
minhcopilotminhcopilot
1

react-hooks

Detect and fix React hook violations across JavaScript and TypeScript codebases.

Community
Intermediate
sernafernandosernafernando
1

react-19

Apply React 19 patterns with the React Compiler in .tsx files.

Community
Intermediate
salavendersalavender
47

react-hooks

Detect React hook violations and guide correct useEffect, useMemo, and useCallback patterns.

Community
Intermediate
julianobarbosajulianobarbosa
7

writing-typescript

Enforce strict TypeScript patterns and tooling configurations for codebases.

Community
Intermediate