skills.rest
discountry
discountryCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-principles

Enforces React core best practices for component design, state management, and useEffect.

1|Updated Mar 12, 2026
Search Tags:#state management#react#frontend development#component design#useEffect#custom hooks#react best practices
One-click install
npx skills add https://github.com/discountry/ritmex-skills --skill react-principles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-principles
Source: https://github.com/discountry/ritmex-skills/tree/main/skills/react-principles
Command: npx skills add https://github.com/discountry/ritmex-skills --skill react-principles

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React development often leads to inconsistent code quality, unnecessary side effects, and unmaintainable component logic that causes bugs, performance issues, and difficult refactoring cycles as codebases scale.

Core Features & Use Cases

  • Component Design Guidance: Enforces single-responsibility components, one-way data flow, and pure render functions to reduce bugs and improve readability.
  • Effect Discipline Rules: Eliminates unnecessary useEffect usage, prevents stale closure bugs, and ensures proper synchronization with external systems.
  • Custom Hook Best Practices: Provides patterns for extracting reusable logic into stable, domain-specific custom hooks.
  • Use Case: When reviewing a React feature branch with redundant effects for data fetching and state synchronization, use this skill to identify antipatterns and refactor code to align with React core best practices.

Quick Start

Use the react-principles skill to audit the Dashboard.tsx file for unnecessary useEffect usage and state management improvements.

Frequently Asked Questions about react-principles

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

FAQPage Schema
How do I eliminate unnecessary side effects and unmaintainable component logic in React?▼

To eliminate unnecessary side effects in React, enforce pure component design, minimal state derivation, and correct effect synchronization to refactor unmaintainable component logic into clean, maintainable code.

When should I avoid using useEffect for state synchronization and data fetching?▼

You should avoid using useEffect for state synchronization when the logic introduces unnecessary side effects or stale closure bugs, instead enforcing effect discipline rules to ensure proper synchronization with external systems.

What are the best practices for extracting reusable custom hooks in React?▼

Best practices for custom hooks involve extracting reusable logic into stable, domain-specific abstractions, ensuring proper component design and one-way data flow to reduce bugs and improve readability.

How do I audit React code for antipatterns in .tsx and .jsx files?▼

You can audit React code for antipatterns by reviewing .ts/.tsx/.js/.jsx files to identify redundant effects and state management improvements, refactoring code to align with React core best practices.

Why does my React component have bugs caused by redundant state derivation?▼

Redundant state derivation causes bugs by violating single-responsibility component design and one-way data flow, requiring minimal state derivation and pure render functions to eliminate inconsistent code quality.

Can I use React best practices to review a feature branch with pure component design?▼

Yes, you can use React best practices to review a feature branch by enforcing single-responsibility components, one-way data flow, and pure render functions to identify antipatterns and refactor effectively.

Related Skills

Explore More Software Engineering Skills→
BrOrlandiBrOrlandi
20

refactor-code

Identify large non-React TypeScript/JavaScript files and propose a refactoring plan.

Community
Advanced
rabbicserabbicse

react-expert

Build and refactor React 18+ components in TypeScript with Next.js App Router.

Community
Advanced
phuonghxphuonghx
1

lint-and-validate

Automate linting, formatting, type checking, and security audits for Node.js/TypeScript and Python codebases.

Community
Advanced
jonmummjonmumm
2

dont-use-use-effect

Identify and correct unnecessary useEffect usage in React components.

Community
Advanced