2025-07-23 — By Siddharth Jain · 7 min read
React Hooks revolutionized how developers build and manage component state, side effects, and logic in modern React applications. This guide walks you through all built-in React Hooks—what they do, when to use them, and real-world examples to help you master them.
🪝 What Are React Hooks? React Hooks are functions that let you “hook into” React state and lifecycle features directly from function components. They eliminate the need for class components and make your code more modular and readable
🔗 List of All Built-In React Hooks
React Built-in Hooks Summary
| Hook | Category | Purpose |
|---|---|---|
useState | State | Add local state to components |
useReducer | State | Manage complex state logic with reducers |
useEffect | Side Effects | Run code after render (e.g., data fetching, subscriptions) |
useLayoutEffect | Side Effects | Run effects synchronously after render, before painting |
useInsertionEffect | Side Effects | Inject styles in SSR or before layout/sync effects |
useContext | Context | Access context values |
useRef | Refs | Create instance variables unaffected by re-renders |
useImperativeHandle | Refs | Expose custom values/methods to parent via ref |
useMemo | Performance | Memorize computed values for performance |
useCallback | Performance | Memorize functions to avoid unnecessary renders |
useId | Utilities | Generate unique IDs (mainly for accessibility) |
useDebugValue | Utilities | Label and display custom hook values in React DevTools |
🏗️ State Hooks
useState
- Store and manage local state in function components
const [count, setCount] = useState(0);
setCount(count + 1);
useReducer
- For more complex state logic or multiple related values.
const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'increment' });
🎯 Side Effect Hooks
useEffect
- Run side effects after render (like data fetching).
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
useLayoutEffect
- Like useEffect, but runs after DOM mutations and before browser paints.
useInsertionEffect
- Rarely needed; for style insertion before layout and paint (SSR, libraries only).
🌐 Context Hooks
useContext
- Access a React context value without manually drilling props.
const theme = useContext(ThemeContext);
🔗 Ref Hooks
useRef
- Create a mutable container that persists across renders.
const inputRef = useRef(null);
<input ref={inputRef} />
useImperativeHandle
- Customize the ref value exposed to parent components.
useImperativeHandle(ref, () => ({
focus: () => { /* ... */ }
}));
🏎️ Performance Optimization Hooks
useMemo
- Memoize expensive calculations between renders.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useCallback
- Memoize callback functions between renders—prevents unnecessary re-renders.
const handleClick = useCallback(() => setCount(c => c + 1), []);
🛠️ Utility & Advanced Hooks
useId
- Generate unique IDs for accessibility or list keys.
useDebugValue
- Label custom hooks in React DevTools.
useDebugValue(value);
useTransition
- Manage concurrent UI states for smoother loading and transitions.
const [isPending, startTransition] = useTransition();
useDeferredValue
- Defer updating non-urgent parts of the UI.
useSyncExternalStore
- Read from and subscribe to external stores for consistent state management.
✨ Custom Hooks
- React also empowers you to build custom hooks—your own logic using any of the core hooks above. Just start a function name with use and compose any React hooks or JavaScript logic needed.
⚡ Best Practices
Always call hooks at the top level of your React functions—not inside loops or conditions.
Only call hooks from React function components or custom hooks—never in regular JS functions or class components.
Keep hooks small and focused to maximize reusability and testability.
React’s built-in hooks provide a modern, streamlined way to manage state, side effects, performance, context, and more—all without classes. Mastering them unlocks powerful patterns and clean, efficient code for any React developer
