modern-best-practice-react-components

What problem does it solve?

This Skill helps developers write cleaner, more maintainable, and performant React components by adhering to modern best practices and avoiding common pitfalls.

Core Features & Use Cases

• Component Structure: Guides on function component naming, prop typing, and keeping components flat.
• State Management: Strategies to avoid unnecessary useState and useEffect, favoring derived state and external libraries like TanStack Query.
• Rendering & Effects: Best practices for deriving values, using useMemo sparingly, and minimizing side effects.
• Use Case: Refactor an existing React component to eliminate redundant state and useEffect calls, improving its readability and performance.

Quick Start

Apply the principles in this skill to refactor the UserProfile component to avoid unnecessary state and effects.