React Hooks Reference
A complete, searchable reference for every React hook with code examples, parameters, return values, and common patterns.
About This Tool
The React Hooks Reference is a comprehensive, browser-based guide to every built-in React hook from useState and useEffect to the newest hooks in React 19 like useOptimistic, useFormStatus, and use. Whether you are learning React for the first time, looking up a hook's exact signature during development, or exploring advanced patterns for performance optimization, this tool gives you instant access to detailed documentation and copy-ready code examples.
All content is rendered entirely in your browser with no server round-trips, no tracking, and no third-party dependencies. You can search by hook name, filter by category (State, Effect, Context, Performance, Ref, Form, Transition), and expand any entry to see its full signature, parameter descriptions, return value, a practical code example, common usage patterns, and important gotchas to watch out for.
The reference covers all 18 built-in hooks across 7 categories. State hooks (useState, useReducer, useId, useSyncExternalStore) manage component data. Effect hooks (useEffect, useLayoutEffect, useInsertionEffect) handle side effects and DOM synchronization. Context hooks (useContext, use) read from React context. Performance hooks (useCallback, useMemo) optimize re-renders. Ref hooks (useRef, useImperativeHandle, useDebugValue) provide escape hatches. Form hooks (useOptimistic, useFormStatus) simplify form handling. Transition hooks (useTransition, useDeferredValue) keep UI responsive. If you are working with TypeScript, you may also find our JSON to TypeScript converter useful. For design patterns commonly used alongside hooks, check our Design Pattern Reference.
Each hook entry includes the React version it was introduced in, so you can quickly check compatibility with your project. The Rules of Hooks section is always accessible as a reminder of the fundamental constraints that all hooks must follow.
How to Use
- Use the search bar to type a hook name (e.g., "useEffect") or a keyword (e.g., "memoize" or "context").
- Click a category badge (State, Effect, Context, Performance, Ref, Form, Transition) to filter hooks by type.
- Click any hook card to expand its full documentation, including signature, parameters, return value, code example, common patterns, and gotchas.
- Use the Copy button to copy a hook's signature or code example to your clipboard.
- Click Expand All or Collapse All to quickly browse or focus on specific hooks.
- Toggle the Rules of Hooks section to review the fundamental rules.
- Press Ctrl+Shift+C to copy the code example when a single hook is visible.
Popular React Hooks Guides
FAQ
Is my data safe when using this tool?
Absolutely. This tool is a purely client-side reference that runs entirely in your browser. It does not send any data to external servers, does not use cookies, and does not collect any analytics. Everything runs locally on your device.
Which React version do I need for all hooks?
The core hooks (useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue) are available since React 16.8. useId, useSyncExternalStore, useTransition, useDeferredValue, and useInsertionEffect require React 18. useOptimistic, useFormStatus, and use require React 19.
What are the Rules of Hooks?
There are two main rules: (1) Only call hooks at the top level of your component or custom hook -- never inside loops, conditions, or nested functions. (2) Only call hooks from React function components or custom hooks, not from regular JavaScript functions. The 'use' hook in React 19 is the exception: it can be called conditionally.
When should I use useReducer instead of useState?
Use useReducer when your state logic is complex, involves multiple sub-values, or when the next state depends on the previous one. useReducer also makes it easier to test state transitions independently and works well when passing dispatch to deeply nested components since its identity is stable.
What is the difference between useMemo and useCallback?
useMemo caches the result of a computation (any value), while useCallback caches a function definition. In fact, useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). Use useMemo for expensive calculations, and useCallback for stable function references passed to memoized children.
What is the difference between useEffect and useLayoutEffect?
useEffect runs asynchronously after the browser paints, while useLayoutEffect runs synchronously after DOM mutations but before the browser paints. Use useLayoutEffect when you need to measure or mutate the DOM before the user sees the update (e.g., tooltips, scroll position). Prefer useEffect for most side effects to avoid blocking visual updates.
Are custom hooks covered in this reference?
This reference covers all built-in React hooks. Custom hooks are user-defined functions that compose built-in hooks. You can learn how to create custom hooks by understanding the patterns shown for each built-in hook. The convention is to name custom hooks starting with 'use' (e.g., useOnlineStatus).
Related Tools
TypeScript Utility Types Reference
Interactive reference for all TypeScript built-in utility types with searchable examples, syntax, and playground.
JSON to TypeScript
Generate TypeScript interfaces or type aliases from JSON with nested type inference.
CSS Selector Reference
Complete interactive CSS selector reference with specificity calculator, live preview, searchable categories, and browser support for every selector.
Big-O Reference
Interactive Big-O complexity reference with growth charts, algorithm database, and comparison tools. Visualize O(1) to O(n!) growth curves.
HTTP Method Reference
Interactive HTTP method reference with detailed specs for GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS, and more.