modern-best-practice-react-components

What problem does it solve?

Modern React projects often accumulate bloated components with tangled state and heavy useEffect patterns. This Skill teaches clean, maintainable component design using current best practices.

Core Features & Use Cases

• Small, focused components with a single responsibility
• Explicit props typing (TypeScript) and clear API design
• Prefer composition over configuration; derive values during rendering; avoid unnecessary effects
• Provide guidance on event handlers, state management, and sharing logic between components
• Works well for building scalable UI systems and maintaining readability over time

Quick Start

Create a small, focused React component in TypeScript that derives values during rendering and avoids unnecessary useEffect calls.