Provide a comprehensive overview of all React hooks in table format with brief descriptions and use cases.
3 minintermediatereactcomprehensiveoverviewall
Quick Answer
Here's a complete reference table of all React hooks with their purposes, return values, and common use cases.
Detailed Answer
Provide a comprehensive overview of all React hooks in table format with brief descriptions and use cases.
Answer:
Here's a complete reference table of all React hooks with their purposes, return values, and common use cases:
| Hook | Purpose | Returns | Common Use Cases |
|---|---|---|---|
| useState | Manage local component state | [state, setState] | Form inputs, counters, toggles, simple state |
| useReducer | Manage complex state with actions | [state, dispatch] | Complex forms, state machines, multiple related values |
| useEffect | Handle side effects after render | undefined | Data fetching, subscriptions, timers, cleanup |
| useLayoutEffect | Handle side effects before paint | undefined | DOM measurements, preventing visual flicker |
| useMemo | Memoize expensive calculations | memoizedValue | Expensive computations, derived state |
| useCallback | Memoize function references | memoizedCallback | Event handlers, preventing child re-renders |
| useRef | Access DOM elements or store mutable values | { current: value } | DOM manipulation, timers, previous values |
| useContext | Access context values | contextValue | Theme, user data, global state |
| createContext | Create context for sharing data | Context | Provider setup, avoiding prop drilling |
| useImperativeHandle | Expose imperative API to parent | undefined | Focus management, custom refs |
| useId | Generate unique IDs | string | Accessibility, form labels, SSR |
| useSyncExternalStore | Subscribe to external stores | snapshot | Browser APIs, third-party state |
| useTransition | Mark updates as non-urgent | [isPending, startTransition] | Expensive updates, search filtering |
| useDeferredValue | Defer value updates | deferredValue | Search input, large lists |
| useInsertionEffect | Insert styles before layout | undefined | CSS-in-JS libraries, dynamic styles |
| useDebugValue | Display custom hook values in DevTools | undefined | Custom hook debugging |
Detailed Hook Categories:
State Management Hooks:
// useState - Simple state
const [count, setCount] = useState(0);
// useReducer - Complex state
const [state, dispatch] = useReducer(reducer, initialState);
Effect Hooks:
// useEffect - Side effects after render
useEffect(() => {
fetchData();
}, [dependency]);
// useLayoutEffect - Side effects before paint
useLayoutEffect(() => {
measureElement();
}, []);
Performance Hooks:
// useMemo - Memoize calculations
const expensiveValue = useMemo(() =>
computeExpensiveValue(a, b), [a, b]
);
// useCallback - Memoize functions
const handleClick = useCallback(() => {
doSomething();
}, [dependency]);
Ref Hooks:
// useRef - DOM access or mutable values
const inputRef = useRef<HTMLInputElement>(null);
const previousValue = useRef(value);
// useImperativeHandle - Custom ref API
useImperativeHandle(ref, () => ({
focus: () => inputRef.current?.focus()
}));
Context Hooks:
// createContext - Create context
const ThemeContext = createContext('light');
// useContext - Use context
const theme = useContext(ThemeContext);
Concurrent Features (React 18+):
// useTransition - Non-urgent updates
const [isPending, startTransition] = useTransition();
// useDeferredValue - Defer value updates
const deferredQuery = useDeferredValue(query);
Utility Hooks:
// useId - Unique IDs
const id = useId();
// useSyncExternalStore - External store subscription
const snapshot = useSyncExternalStore(subscribe, getSnapshot);
// useInsertionEffect - Style insertion
useInsertionEffect(() => {
insertStyles();
});
// useDebugValue - DevTools debugging
useDebugValue(value, format);
Hook Rules Summary:
- Only call hooks at the top level
- Only call hooks from React functions
- Use exhaustive-deps ESLint rule
- Prefer custom hooks for reusable logic
When to Use Each Hook:
- useState: Simple, independent state values
- useReducer: Complex state with multiple related values
- useEffect: Data fetching, subscriptions, cleanup
- useLayoutEffect: DOM measurements, preventing flicker
- useMemo: Expensive calculations that depend on specific values
- useCallback: Functions passed to child components
- useRef: DOM access, storing mutable values, previous values
- useContext: Accessing shared data without prop drilling
- useTransition: Marking expensive updates as non-urgent
- useDeferredValue: Deferring expensive value updates