React Hooks: Every Hook Explained with Live Examples

React hooks are functions whose names start with use that let a function component use React features: useState to remember a value, useEffect to run code after rendering, useRef to hold onto a DOM node, useContext to read shared data. You call them at the top of your component, and React keeps their values between renders.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

Four hooks work together here. useState stores the text, useRef points at the input so the button can focus it, useMemo keeps the filtered list until the query changes, and useEffect logs after each render where the query changed. Type an and watch the Console: one line per keystroke, after the list updates.

Why hooks exist

Before React 16.8, a component that needed state or lifecycle code had to be a class. The logic for one feature was split across componentDidMount, componentDidUpdate and componentWillUnmount, and sharing it between components meant mixins (which never worked with class syntax), higher order components or render props, all of which wrapped your tree in extra layers.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

With hooks the same feature lives in one place: the effect starts the timer and its cleanup stops it.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

Hide the clock and the Console prints timer stopped: React ran the cleanup when Clock left the screen. Show it again and a fresh timer starts. Class components still work in React 19, but new code uses hooks.

Every built-in hook

React 19.2 groups its hooks by what they give a component. You will use the first two groups every day and the rest when a specific problem calls for them.

use, useActionState, useOptimistic and useFormStatus arrived with React 19, and useEffectEvent became stable in 19.2. Every other hook on the list works in React 18 too.

State renders, refs do not

Not every hook triggers a render. useState and useReducer do: change their value and React draws the component again. useRef hands you an object whose current field you can change freely, and React never re-renders because of it. That makes it the right place for a timer id, a previous value, or a count the screen does not show.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer holds the cart and useState holds the note; both cause a render when they change, and the effect logs one line per render. The effect also changes commits.current, yet that change never causes a render of its own, so the log does not loop. The count is updated in an effect rather than in the component body because the body should not change anything while it renders.

The rules of hooks

Every hook follows two rules:

1. Call hooks at the top level of your component, never inside a condition, a loop or a nested function.
2. Call hooks only from function components or from your own custom hooks.

React does not know hooks by name. It knows them by the order you call them in, and it expects that order to be the same on every render. A hook inside an if would shift every hook after it. The rules of hooks page shows what breaks and how to fix it. use is the one exception: it may be called inside a condition.

Your first custom hook

When two components need the same stateful logic, move it into a function whose name starts with use. That function can call any other hook. Each component that calls it gets its own state.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

Both counters run the same hook, but clicking one leaves the other alone: a custom hook shares logic, not state. Add a decrement function to useCounter and a button that calls it, and both counters get it at once. More patterns (useToggle, useDebounce, useLocalStorage) are on the custom hooks page.

Which hook to reach for

• The screen should change when a value changes: useState, or useReducer when many events update the same state.
• You need to talk to something outside React (a timer, a subscription, a request): useEffect.
• You need a DOM node or a value the screen does not show: useRef.
• Many components deep in the tree need the same value: useContext.
• A render is slow because of one calculation or because a memoized child re-renders: useMemo and useCallback. React Compiler can add this memoization for you, but writing it by hand still works and is still common.
• Typing feels laggy because the update behind it is heavy: useTransition or useDeferredValue.