# react-patterns

> React 19 patterns including hooks, Server Components, Client Components, Suspense, Error Boundaries, form actions, and useOptimistic. Use when building React components or implementing React 19 features.

- Author: adhammahmoud
- Repository: AdhamMahmoud/adham-ai-builder-claude-code
- Version: 20260115171647
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/AdhamMahmoud/adham-ai-builder-claude-code
- Web: https://mule.run/skillshub/@@AdhamMahmoud/adham-ai-builder-claude-code~react-patterns:20260115171647

---

---
name: react-patterns
description: React 19 patterns including hooks, Server Components, Client Components, Suspense, Error Boundaries, form actions, and useOptimistic. Use when building React components or implementing React 19 features.
---

# React 19 Patterns

## Core Hooks
| Hook | Use Case |
|------|----------|
| `useState` | Local state |
| `useEffect` | Side effects, lifecycle |
| `useRef` | DOM refs, mutable values |
| `useCallback` | Memoize functions |
| `useMemo` | Memoize values |
| `useContext` | Consume context |
| `useReducer` | Complex state logic |
| `useTransition` | Non-blocking updates |
| `useDeferredValue` | Defer expensive renders |

## Server Components
```tsx
// Default in Next.js App Router
async function ServerComponent() {
  const data = await db.query()
  return <div>{data}</div>
}
```

## Client Components
```tsx
'use client'
function ClientComponent() {
  const [state, setState] = useState()
  return <button onClick={() => setState()}>Click</button>
}
```

## Suspense Patterns
```tsx
<Suspense fallback={<Loading />}>
  <AsyncComponent />
</Suspense>
```

## Error Boundaries
```tsx
<ErrorBoundary fallback={<Error />}>
  <Component />
</ErrorBoundary>
```

## Form Actions (React 19)
```tsx
<form action={serverAction}>
  <input name="title" />
  <button type="submit">Submit</button>
</form>
```

## useOptimistic (React 19)
```tsx
const [optimisticState, setOptimisticState] = useOptimistic(state)
// Instant UI updates before server confirmation
```

## Context Pattern
```tsx
const Context = createContext<Type>()

export function Provider({ children }) {
  return <Context.Provider value={value}>{children}</Context.Provider>
}

export function useMyContext() {
  return useContext(Context)
}
```

## Compound Components
```tsx
<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Content 1</TabPanel>
    <TabPanel>Content 2</TabPanel>
  </TabPanels>
</Tabs>
```

## Render Props
```tsx
<DataProvider render={(data) => <Display data={data} />} />
```

## Custom Hooks Pattern
```tsx
function useCustomHook() {
  const [state, setState] = useState()
  useEffect(() => { ... })
  return { state, actions }
}
```

## Docs
- https://react.dev