Guía Completa de React Hooks: useState, useEffect y más

Domina los hooks de React desde cero: useState, useEffect, useContext, useReducer y custom hooks con ejemplos prácticos.

Ana García

Frontend Developer especializada en React y arquitectura de componentes

10 de noviembre de 2025

12 min

Guía Completa de React Hooks

Los React Hooks revolucionaron la forma en que escribimos componentes en React. Introducidos en la versión 16.8, nos permiten usar estado y otras características de React sin escribir clases.

En esta guía aprenderás a dominar los hooks esenciales: desde useState hasta custom hooks personalizados.

useState: Gestión de Estado

useState es el hook fundamental para manejar estado en componentes funcionales. Te permite añadir estado local a tus componentes sin necesidad de convertirlos en clases.

typescript

Counter.tsx

1import { useState } from 'react';
2
3function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <div>
8      <p>Has clickeado {count} veces</p>
9      <button onClick={() => setCount(count + 1)}>
10        Incrementar
11      </button>
12    </div>
13  );
14}

useState con Objetos

Puedes usar objetos para agrupar estado relacionado. Importante: siempre usa el spread operator para mantener la inmutabilidad.

typescript

UserProfile.tsx

1function UserProfile() {
2  const [user, setUser] = useState({
3    name: 'Ana',
4    age: 28,
5    email: 'ana@example.com'
6  });
7
8  const updateEmail = (newEmail: string) => {
9    setUser(prev => ({
10      ...prev,
11      email: newEmail
12    }));
13  };
14
15  return <div><h2>{user.name}</h2></div>;
16}

useEffect: Efectos Secundarios

useEffect te permite realizar efectos secundarios en componentes funcionales: llamadas a APIs, suscripciones, manipulación del DOM, timers, etc.

typescript

UserData.tsx

1import { useState, useEffect } from 'react';
2
3function UserData({ userId }: { userId: string }) {
4  const [user, setUser] = useState(null);
5  const [loading, setLoading] = useState(true);
6
7  useEffect(() => {
8    async function fetchUser() {
9      setLoading(true);
10      const response = await fetch(`/api/users/${userId}`);
11      const data = await response.json();
12      setUser(data);
13      setLoading(false);
14    }
15
16    fetchUser();
17
18    return () => {
19      // Cleanup
20    };
21  }, [userId]);
22
23  if (loading) return <p>Cargando...</p>;
24  return <div>{user?.name}</div>;
25}

Dependencies Array: El array de dependencias determina cuándo se ejecuta el efecto. [] = solo al montar, [dep1, dep2] = cuando cambian.

Custom Hooks: Reutilización

Los custom hooks te permiten extraer lógica de componentes en funciones reutilizables. Convención: siempre empiezan con use.

typescript

useFetch.ts

1function useFetch<T>(url: string) {
2  const [data, setData] = useState<T | null>(null);
3  const [loading, setLoading] = useState(true);
4  const [error, setError] = useState<Error | null>(null);
5
6  useEffect(() => {
7    async function fetchData() {
8      try {
9        const response = await fetch(url);
10        const json = await response.json();
11        setData(json);
12      } catch (err) {
13        setError(err as Error);
14      } finally {
15        setLoading(false);
16      }
17    }
18    fetchData();
19  }, [url]);
20
21  return { data, loading, error };
22}

Buena práctica: Usa TypeScript generics en custom hooks para type safety completo.

Reglas de los Hooks

React tiene dos reglas estrictas para hooks que debes seguir siempre:

typescript

1// ❌ MAL: Hook dentro de condición
2function BadComponent() {
3  if (someCondition) {
4    const [state, setState] = useState(0);
5  }
6}
7
8// ✅ BIEN: Hook en el nivel superior
9function GoodComponent() {
10  const [state, setState] = useState(0);
11  
12  if (someCondition) {
13    setState(10);
14  }
15}