🔹Guía definitiva de React Hooks 1/8

Este guía está diseñada para llevarte desde los conceptos básicos hasta patrones avanzados, con ejemplos prácticos, consejos de buenas prácticas y advertencias sobre errores comunes.

---

📋 Tabla de contenidos

1. useState – El fundamento del estado
2. useEffect – Efectos secundarios y ciclo de vida
3. useContext – Compartir estado sin props
4. useReducer – Lógica de Estado Compleja y predecible
5. useRef – Referencias, Almacenamiento y Escape
6. useMemo y useCallback – Optimizando el Rendimiento
7. Custom Hooks – Creando Lógica Reutilizable
8. Errores Comunes y Soluciones
9. Recursos Adicionales

---

🔹 1. useState – Manejar el estado local

¿Qué es y para qué sirve?

useState es el hook más fundamental. Te permite añadir una "variable de estado" a tus componentes de función. A diferencia de una variable normal, cuando el valor de esta variable cambia, React automáticamente vuelve a renderizar el componente para reflejar el cambio en la interfaz.

Úsalo para: manejar datos que cambian con el tiempo y que afectan a lo que se ve en pantalla, como el valor de un input, si un modal está abierto o los datos de un contador.

Sintaxis y parámetros

const [estado, setEstado] = useState(valorInicial);

• valorInicial: El valor que tendrá estado la primera vez que se renderice el componente. Puede ser cualquier tipo de dato (número, string, objeto, array, etc.).
• estado: La variable que contiene el valor actual del estado. Es de solo lectura.
• setEstado: La función que usas para actualizar el valor de estado. Al llamarla, se dispara una nueva renderización.

---

Ejemplo práctico detallado: formulario de registro

En lugar de un simple contador, veamos un ejemplo más realista: un formulario de registro que maneja un objeto como estado.

import React, { useState } from 'react';

function FormularioRegistro() {
  const [usuario, setUsuario] = useState({
    nombre: '',
    email: '',
    password: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    // Usamos la forma funcional de setState para asegurar que tenemos el estado más reciente
    setUsuario(prevUsuario => ({
      ...prevUsuario,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Aquí normalmente enviarías los datos a un servidor
    alert(`Usuario registrado: ${usuario.nombre} con email ${usuario.email}`);
    console.log(usuario);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Formulario de Registro</h3>
      <input
        type="text"
        name="nombre"
        placeholder="Nombre"
        value={usuario.nombre}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        placeholder="Email"
        value={usuario.email}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        placeholder="Contraseña"
        value={usuario.password}
        onChange={handleChange}
      />
      <button type="submit">Registrarse</button>
    </form>
  );
}

---

✅ Buenas practicas y patrones comunes

1. Agrupar estado relacionado: Si varios estados cambian juntos, considera agruparlos en un objeto o array. Esto es útil en formularios.
2. Usar la actualización funcional: Cuando el nuevo estado depende del anterior (como en un contador), usa setContador(c => c + 1). Esto evita problemas con el estado "viejo" (stale state) en operaciones asíncronas.
3. La actualización de estado es asíncrona: No esperes que el valor del estado se actualice inmediatamente después de llamar a setEstado. Si necesitas realizar una acción después de que el estado cambie, usa useEffect.
4. No mutes el estado directamente: Especialmente con objetos y arrays. En lugar de usuario.nombre = 'nuevo', crea un nuevo objeto: setUsuario({...usuario, nombre: 'nuevo'}). La inmutabilidad es clave en React.

🚨 Errores comunes y cómo evitarlos

• Error: Modificar el estado directamente.
  

  // MAL ❌
  const [user, setUser] = useState({ name: 'Ana' });
  user.name = 'Juan'; // No dispara re-render y es un anti-patrón
  setUser(user);
  

  • Solución: Siempre crea un nuevo objeto/array.

  // BIEN ✅
  setUser({ ...user, name: 'Juan' });
  

• Error: Llamar a useState dentro de condicionales, bucles o funciones anidadas.

  • Solución: Los hooks siempre deben llamarse en el nivel superior del componente. React depende del orden en que se llaman para funcionar correctamente.

🚀 Retos prácticos

1. Contador con Límite: Crea un contador que no pueda pasar de 10 ni ser menor que 0.
2. Input con Validación: Haz un input que muestre un mensaje de error si el texto tiene menos de 5 caracteres.
3. Toggle de Visibilidad: Un botón que muestre u oculte un texto.
4. Lista de Tareas Simple: Un input para añadir tareas a una lista. Cada tarea debe tener un botón para eliminarla (pista: necesitarás manejar un array en el estado).