React Guide
React Hooks Guide
Every React hook explained with real code and when to use each one.
Last updated: October 2026 · Tested on React 18+
Quick answer: React has 9 built-in hooks. The essential ones are useState (state), useEffect (side effects), useContext (shared data), useRef (DOM refs and values), and useMemo/useCallback (performance). You can also write custom hooks. Always call hooks at the top level of your component.
useState — Local State
Store and update component state.
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: 'Alice' });👉 Read our complete useState guide.
useEffect — Side Effects
Run code after render — data fetching, subscriptions, timers.
useEffect(() => {
const id = setInterval(() => tick(), 1000);
return () => clearInterval(id);
}, []);👉 Read our complete useEffect guide.
useContext — Shared State
Read values from a context without prop drilling.
const theme = useContext(ThemeContext);👉 Read our complete Context API guide.
useRef — DOM Refs & Mutable Values
Hold a mutable value that doesn't trigger re-renders, or reference a DOM element.
const inputRef = useRef(null);
function focusInput() {
inputRef.current.focus();
}
return <input ref={inputRef} />;Common uses: focus inputs, store interval IDs, hold scroll positions.
useMemo — Memoize Values
Cache the result of an expensive computation between renders.
const sorted = useMemo(
() => items.sort((a, b) => a.price - b.price),
[items]
);Only use when the computation is genuinely expensive or the value must be referentially stable (e.g., passed to a memoized child).
useCallback — Memoize Functions
Cache a function so it isn't recreated on every render.
const handleClick = useCallback(() => {
console.log(count);
}, [count]);Use when passing the function to a memoized child or when it's a dependency of another hook.
useReducer — Complex State Logic
Manage state with a reducer function — like Redux, but local.
function reducer(state, action) {
switch (action.type) {
case 'increment': return { count: state.count + 1 };
case 'decrement': return { count: state.count - 1 };
default: return state;
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });Use when state transitions are complex or the next state depends heavily on the previous one.
Custom Hooks — Extract and Reuse Logic
A custom hook is a function whose name starts with use and calls other hooks. It's how you share logic between components.
function useLocalStorage(key, initial) {
const [value, setValue] = useState(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initial;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
// Usage
const [theme, setTheme] = useLocalStorage('theme', 'dark');Custom hooks let you build a shared library of logic like useFetch, useDebounce, useWindowSize, and useMediaQuery.
🎯 Hook Selection Cheatsheet
| I want to... | Use this hook |
|---|---|
| Store a value that changes | useState |
| Fetch data or subscribe to something | useEffect |
| Share data deep in the tree | useContext |
| Access a DOM element | useRef |
| Keep a value across renders without re-rendering | useRef |
| Cache an expensive calculation | useMemo |
| Stabilize a function reference | useCallback |
| Manage complex state | useReducer |
| Reuse logic across components | Custom hook |
🛡️ The Rules of Hooks
- Only call hooks at the top level. Never inside loops, conditions, or nested functions.
- Only call hooks from React components or custom hooks. Not from plain JavaScript functions.
- Order matters. Hooks are called in the same order on every render — that's how React tracks state internally.
- Name custom hooks with
use. ESLint relies on the naming convention to enforce the rules. - Enable the ESLint plugin.
eslint-plugin-react-hookscatches rule violations automatically.
Why the rules exist: Hooks are tracked by call order, not by name. If the order changes between renders, React can't match state to the right hook and your app breaks in mysterious ways.
❓ Frequently Asked Questions
What are React Hooks?
React Hooks are functions that let you use state and lifecycle features in functional components. They were introduced in React 16.8 and replace class components for most use cases.
What are the rules of Hooks?
Only call hooks at the top level of a component — never inside loops, conditions, or nested functions. Only call hooks from React function components or custom hooks. This ensures hooks are called in the same order every render.
What is the difference between useMemo and useCallback?
useMemo memoizes a computed value. useCallback memoizes a function. Both prevent unnecessary recalculations. Use useMemo for expensive computations and useCallback for functions passed to child components.
When should I use useReducer instead of useState?
Use useReducer when state logic is complex, involves multiple sub-values, or when the next state depends heavily on the previous one. Use useState for simple, independent values.
How do I create a custom hook?
A custom hook is a function whose name starts with 'use' and that calls other hooks inside. It lets you extract and reuse logic across components. There is no special syntax — just a convention.