React Idioms and Patterns

What problem does it solve?

It solves inconsistent or non-idiomatic React implementations that lead to brittle components, avoidable performance issues, and hard-to-maintain state and error handling.

Core Features & Use Cases

• Functional component patterns: Prefer composition patterns and typed props with predictable defaults, avoiding class components in new code.
• Hook correctness: Use custom hooks for reusable logic, apply memoization only when profiling indicates issues, and always implement effect cleanup for subscriptions and abortable work.
• Pragmatic state and error handling: Treat server state with TanStack Query/SWR (not global state), manage client state only where appropriate, and use error boundaries and query-level error UI.
• Use case: When building a task dashboard with lists, forms, and API-driven server state, this Skill helps ensure your components are resilient, accessible, and maintainable from the first iteration through production.

Quick Start

Use the React Idioms and Patterns Skill to refactor an existing React feature so it follows functional composition, hook best practices, server-state handling with TanStack Query/SWR, and robust error UI.