writing-react

What problem does it solve?

This Skill enforces best practices for writing React components, preventing common anti-patterns and ensuring maintainable, efficient, and scalable code.

Core Features & Use Cases

• Component Structure: Guides the organization of components into hooks, handlers, and render sections.
• State Management: Prevents syncing props to state and storing computed values.
• useEffect Best Practices: Discourages using useEffect for events or data fetching, promoting React Query instead.
• JSX Optimization: Encourages extracting complex conditionals and render functions into separate components.
• Use Case: When developing a new feature with multiple interconnected components, this skill ensures that state is managed effectively, side effects are handled correctly, and the codebase remains clean and easy to understand.

Quick Start

Apply the writing-react skill to refactor the provided React component to adhere to the specified patterns.