claudegoodies
Skill

react-patterns

From affaan-m

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.

Documents idiomatic React 18/19 patterns for hooks, RSC boundaries, Suspense, forms, and state placement.

Use it when

  • Writing or reviewing JSX/TSX components and custom hooks
  • Deciding between useState, context, or an external store like Zustand/Redux
  • Wiring Server/Client component boundaries in Next.js App Router
  • Building forms with React 19 actions or TanStack Query/SWR data fetching

Skip it if

  • Not using React 18/19 or the App Router / RSC model
  • You already have established conventions (e.g. via ESLint rules) covering these patterns
  • Looking for a form/state library implementation rather than guidance on choosing one

Facts

Repository
affaan-m/ECC
Status
Actively maintained
Last commit
Source file
.kiro/skills/react-patterns/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# React Patterns

Idiomatic React 18/19 patterns for building robust, accessible, performant component trees.

## When to Activate

- Writing or modifying React function components, custom hooks, or component trees
- Reviewing JSX/TSX files
- Designing state shape or component composition
- Migrating class components or older `forwardRef`/`useEffect`-heavy code
- Choosing between local state, lifted state, context, and external stores
- Working with Server Components / Client Components (Next.js App Router, RSC)
- Implementing forms with React 19 actions or controlled inputs
- Wiring data fetching with TanStack Query / SWR / RSC

## Core Principles

### 1. Render is a Pure Function of Props and State

```tsx
// Good: derive during render
function Cart({ items }: { items: CartItem[] }) {
  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
  return <span>{formatMoney(total)}</span>;
}

// Bad: derived state stored separately
function Cart({ items }: { items: CartItem[] }) {
  const [total, setTotal] = useState(0);
  useEffect(() => {
    setTotal(items.reduce((sum, i) => sum + i.price * i.qty, 0));
  }, [items]);
  return <span>{formatMoney(total)}</span>;
}
```

Derived state in `useEffect` adds a render cycle, can desync, and obscures the data flow.

### 2. Side Effects Outside Render

Effects, mutations, network calls, and subscriptions live in event handlers o
View full source on GitHub →

Other skills