React Hooks Reference

Comprehensive API reference for all built-in React hooks from the official React documentation.

What This Skill Does

Provides detailed guidance on React's built-in hooks, helping you choose the right hook for your use case and implement it correctly with proper syntax and patterns.

Instructions

When a user asks about React hooks, follow these steps:

1. **Identify the Hook Category**

- State Hooks: `useState`, `useReducer`

- Context Hooks: `useContext`

- Ref Hooks: `useRef`, `useImperativeHandle`

- Effect Hooks: `useEffect`, `useLayoutEffect`, `useInsertionEffect`

- Performance Hooks: `useMemo`, `useCallback`, `useTransition`, `useDeferredValue`

- Other Hooks: `useId`, `useDebugValue`, `useSyncExternalStore`, `useActionState`

2. **Provide Hook-Specific Guidance**

**State Hooks:**

- `useState`: Declare state variables that trigger re-renders when updated

- `useReducer`: Manage complex state logic with a reducer function

- Use `useState` for simple values, `useReducer` for complex state with multiple sub-values

**Context Hooks:**

- `useContext`: Read and subscribe to context values from parent components

- Avoids prop drilling for deeply nested components

**Ref Hooks:**

- `useRef`: Hold mutable values that don't trigger re-renders (DOM nodes, timeout IDs)

- `useImperativeHandle`: Customize the ref exposed by your component (rarely used)

**Effect Hooks:**

- `useEffect`: Connect to external systems (APIs, browser APIs, third-party libraries)

- `useLayoutEffect`: Measure layout before browser repaint

- `useInsertionEffect`: Insert dynamic CSS (library authors only)

- Don't use Effects for data flow orchestration—only for external system synchronization

**Performance Hooks:**

- `useMemo`: Cache expensive calculation results

- `useCallback`: Cache function definitions before passing to optimized components

- `useTransition`: Mark state transitions as non-blocking

- `useDeferredValue`: Defer updating non-critical UI parts

**Other Hooks:**

- `useId`: Generate unique IDs for accessibility

- `useDebugValue`: Custom hook debugging labels in DevTools

- `useSyncExternalStore`: Subscribe to external stores

- `useActionState`: Manage action state

3. **Provide Code Examples**

Always include practical examples:

```javascript

// useState example

function ImageGallery() {

const [index, setIndex] = useState(0);

// ...

}

// useContext example

function Button() {

const theme = useContext(ThemeContext);

// ...

}

// useRef example

function Form() {

const inputRef = useRef(null);

// ...

}

// useEffect example

function ChatRoom({ roomId }) {

useEffect(() => {

const connection = createConnection(roomId);

connection.connect();

return () => connection.disconnect();

}, [roomId]);

// ...

}

// useMemo example

function TodoList({ todos, tab, theme }) {

const visibleTodos = useMemo(

() => filterTodos(todos, tab),

[todos, tab]

);

// ...

}

```

4. **Explain Key Concepts**

- Hooks must be called at the top level (not inside loops, conditions, or nested functions)

- Hooks must be called from React function components or custom hooks

- State updates are asynchronous

- Refs don't trigger re-renders

- Effects run after render

- Dependency arrays control when effects/memos re-run

5. **Suggest Custom Hooks**

When users have repetitive logic, suggest extracting custom hooks:

```javascript

function useCustomHook() {

// Combine built-in hooks

const [state, setState] = useState();

useEffect(() => { /* ... */ }, []);

return [state, setState];

}

```

6. **Best Practices**

- Use `useState` for simple state, `useReducer` for complex state

- Only use Effects for external system synchronization

- Add all dependencies to dependency arrays

- Use `useCallback` and `useMemo` only when needed (don't premature optimize)

- Prefer refs over state for values that don't affect rendering

Examples

**User:** "How do I store form input in React?"

**Response:** Use `useState` hook:

```javascript

function Form() {

const [name, setName] = useState('');

return <input value={name} onChange={e => setName(e.target.value)} />;

}

```

**User:** "How do I fetch data on component mount?"

**Response:** Use `useEffect` with empty dependency array:

```javascript

function Profile({ userId }) {

const [user, setUser] = useState(null);

useEffect(() => {

fetch(`/api/users/${userId}`)

.then(res => res.json())

.then(setUser);

}, [userId]);

// ...

}

```

**User:** "How do I avoid re-creating a function on every render?"

**Response:** Use `useCallback`:

```javascript

const memoizedCallback = useCallback(

() => { doSomething(a, b); },

[a, b]

);

```

Reference

Official React documentation: https://react.dev/reference/react/hooks