# React Hooks Advanced

> Use when implementing advanced React hooks patterns.

- Skill: `loopyluci/react-hooks-advanced` (Agent Skill)
- Install (CLI): `npx skillmds@latest add loopyluci/react-hooks-advanced`
- Raw SKILL.md: https://api.skillmd.com/api/skills/loopyluci/react-hooks-advanced/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: LoopyLuci (https://skillmd.com/u/loopyluci)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/loopyluci/react-hooks-advanced

---


# Advanced React Hooks

Implementing advanced React hooks — from custom hooks composition through useReducer patterns, context optimization, and performance hooks.

## When to Use

- Building complex React components with hooks
- Optimizing React render performance
- Composing custom hooks
- State management with useReducer

## Hook Patterns

```typescript
import { useState, useCallback, useMemo, useRef, useReducer } from 'react';

// Custom hook composition
function useUserData(userId: string) {
  const { data, loading } = useFetch(`/api/users/${userId}`);
  const { update } = useMutate(`/api/users/${userId}`);
  const notifications = useNotifications();
  
  return { user: data, loading, update, notifications };
}

// useReducer with action types
type Action = 
  | { type: 'INCREMENT'; payload: number }
  | { type: 'RESET' }
  | { type: 'SET'; payload: number };

function counterReducer(state: number, action: Action): number {
  switch (action.type) {
    case 'INCREMENT': return state + action.payload;
    case 'RESET': return 0;
    case 'SET': return action.payload;
  }
}
```

## Verification Checklist

- [ ] Custom hooks compose business logic
- [ ] useMemo/useCallback prevent unnecessary re-renders
- [ ] useRef for mutable values without re-render
- [ ] useReducer for complex state logic
- [ ] Context splitting to prevent unnecessary renders
- [ ] Custom hooks tested independently