React Hooks
Intermediate → AdvancedAll 15+ React hooks explained with interactive demos and real-world patterns
Rules of Hooks
1. Only call hooks at the top level — not inside loops, conditions, or nested functions. 2. Only call hooks from React functions — not regular JS functions. ESLint plugineslint-plugin-react-hooks enforces these.useState — Local Component State
beginnerStores a value between renders. Returns [state, setter]. Setter triggers re-render. Use functional updates when new state depends on previous.
useEffect — Side Effects
beginnerSynchronize with external systems (APIs, timers, event listeners, localStorage). Runs after render. Return a cleanup function to avoid memory leaks.
useRef — DOM Refs & Mutable Values
intermediateTwo use cases: 1) Access DOM elements imperatively. 2) Store mutable values that don't trigger re-renders (like timers, previous values, render counts).
useMemo — Memoize Expensive Computations
intermediateCache the result of an expensive calculation between renders. Only recomputes when dependencies change. Don't overuse — has its own cost (memory + comparison).
useCallback — Stable Function References
intermediateMemoize a function between renders. Returns same function reference if deps don't change. Useful when passing callbacks to memoized child components.
useReducer — Complex State Logic
intermediateuseState on steroids. Manages complex state transitions with a reducer function. Great when next state depends on current, or when you have multiple related state variables.
Custom Hooks — Reusable Logic
intermediateExtract stateful logic into reusable functions starting with 'use'. Custom hooks can call other hooks and are the primary way to share stateful logic in React.
useTransition & useDeferredValue — Concurrent React
advancedMark state updates as non-urgent so React can prioritize more critical updates (like input responsiveness). Part of React 18 Concurrent Mode.
Other Hooks — useId, useLayoutEffect, useImperativeHandle
advancedLess common but important hooks for specific use cases: accessibility IDs, layout measurements, and exposing imperative APIs from components.