Hooks de React: todos los hooks explicados con ejemplos

Los hooks de React son funciones cuyo nombre empieza con use que permiten a un componente de función usar características de React: useState para recordar un valor, useEffect para ejecutar código después de renderizar, useRef para guardar un nodo del DOM, useContext para leer datos compartidos. Los llamas al principio de tu componente, y React conserva sus valores entre renderizados.

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>
    );
}

Aquí trabajan juntos cuatro hooks. useState guarda el texto, useRef apunta al input para que el botón pueda darle foco, useMemo conserva la lista filtrada hasta que cambia la búsqueda, y useEffect registra después de cada renderizado en el que cambió la búsqueda. Escribe an y mira la consola: una línea por pulsación, después de que se actualiza la lista.

Por qué existen los hooks

Antes de React 16.8, un componente que necesitaba estado o código de ciclo de vida tenía que ser una clase. La lógica de una funcionalidad quedaba repartida entre componentDidMount, componentDidUpdate y componentWillUnmount, y compartirla entre componentes significaba mixins (que nunca funcionaron con la sintaxis de clases), componentes de orden superior o render props, y todos envolvían tu árbol en capas extra.

// 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>;
    }
}

Con hooks la misma funcionalidad vive en un solo lugar: el efecto inicia el temporizador y su limpieza lo detiene.

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>
    );
}

Oculta el reloj y la consola imprime timer stopped: React ejecutó la limpieza cuando Clock salió de la pantalla. Vuelve a mostrarlo y empieza un temporizador nuevo. Los componentes de clase siguen funcionando en React 19, pero el código nuevo usa hooks.

Todos los hooks integrados

React 19.2 agrupa sus hooks según lo que le dan a un componente. Usarás los dos primeros grupos a diario y el resto cuando un problema concreto lo pida.

use, useActionState, useOptimistic y useFormStatus llegaron con React 19, y useEffectEvent pasó a ser estable en 19.2. Todos los demás hooks de la lista funcionan también en React 18.

El estado renderiza, las refs no

No todos los hooks provocan un renderizado. useState y useReducer sí: cambia su valor y React vuelve a dibujar el componente. useRef te da un objeto cuyo campo current puedes cambiar libremente, y React nunca vuelve a renderizar por eso. Eso lo convierte en el lugar adecuado para el id de un temporizador, un valor anterior o un conteo que la pantalla no muestra.

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 guarda el carrito y useState guarda la nota; ambos provocan un renderizado cuando cambian, y el efecto registra una línea por renderizado. El efecto también cambia commits.current, pero ese cambio nunca provoca un renderizado propio, así que el registro no entra en bucle. El conteo se actualiza en un efecto y no en el cuerpo del componente porque el cuerpo no debe cambiar nada mientras renderiza.

Las reglas de los hooks

Todos los hooks siguen dos reglas:

1. Llama a los hooks en el nivel superior de tu componente, nunca dentro de una condición, un bucle o una función anidada.
2. Llama a los hooks solo desde componentes de función o desde tus propios hooks personalizados.

React no conoce los hooks por su nombre. Los conoce por el orden en que los llamas, y espera que ese orden sea el mismo en cada renderizado. Un hook dentro de un if desplazaría a todos los hooks que vienen después. La página de las reglas de los hooks muestra qué se rompe y cómo arreglarlo. use es la única excepción: se puede llamar dentro de una condición.

Tu primer hook personalizado

Cuando dos componentes necesitan la misma lógica con estado, muévela a una función cuyo nombre empiece con use. Esa función puede llamar a cualquier otro hook. Cada componente que la llama recibe su propio estado.

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>
    );
}

Ambos contadores ejecutan el mismo hook, pero hacer clic en uno no afecta al otro: un hook personalizado comparte lógica, no estado. Agrega una función decrement a useCounter y un botón que la llame, y ambos contadores la reciben a la vez. Hay más patrones (useToggle, useDebounce, useLocalStorage) en la página de hooks personalizados.

Qué hook usar

• La pantalla debe cambiar cuando cambia un valor: useState, o useReducer cuando muchos eventos actualizan el mismo estado.
• Necesitas comunicarte con algo fuera de React (un temporizador, una suscripción, una petición): useEffect.
• Necesitas un nodo del DOM o un valor que la pantalla no muestra: useRef.
• Muchos componentes en lo profundo del árbol necesitan el mismo valor: useContext.
• Un renderizado es lento por un cálculo concreto o porque un hijo memoizado se vuelve a renderizar: useMemo y useCallback. El React Compiler puede agregar esta memoización por ti, pero escribirla a mano sigue funcionando y sigue siendo habitual.
• Escribir se siente lento porque la actualización que hay detrás es pesada: useTransition o useDeferredValue.