En esta ocasión vamos a profundizar en los React Hooks, específicamente useState y useEffect, presentándolos como herramientas fundamentales para desarrolladores de React, tanto principiantes como intermedios. Los Hooks permiten añadir estado local y manejar efectos secundarios en componentes funcionales, ofreciendo una alternativa más limpia y potente a los componentes de clase.

I. Introducción a los React Hooks

• Definición: Los React Hooks son funciones de JavaScript especiales que permiten “engancharse” a características de React como el estado y el ciclo de vida directamente desde componentes funcionales. Son descritos como “herramientas poderosas” para componentes funcionales.
• Motivación para su introducción (React 16.8, principios de 2019):
  • Simplificar componentes de clase complejos con lógica de estado y ciclo de vida dispersa.
  • Mejorar la reutilización de lógica con estado, evitando patrones como Render Props o Higher-Order Components.
  • Organizar mejor el código, agrupando lógica relacionada.
  • Eliminar la complejidad de la sintaxis de clases de JavaScript (this, enlaces de métodos).
• Condición de uso: Los Hooks solo pueden ser usados dentro de componentes funcionales de React o dentro de Hooks personalizados.

II. El Hook useState: Gestionando el Estado Local

• Propósito: Permite añadir estado local a componentes funcionales, haciendo que el componente “recuerde” información y la interfaz de usuario se actualice cuando esta cambia.
• Sintaxis básica:
  • import React, { useState } from 'react';
const [state, setState] = useState(initialState);
  • useState(initialState): Llama al Hook, recibiendo un initialState opcional que se usa solo en el renderizado inicial.
    • Devuelve un array con dos elementos:
      • state: El valor actual de la variable de estado.
      • setState: Una función para actualizar el valor de state. Al llamarla, React re-renderiza el componente.
    • Convención de nombrado: [nombreEstado, setNombreEstado] (ej. [count, setCount]).
• Ejemplo práctico (Contador Simple):
  • Un componente Counter usa useState(0) para inicializar count.
  • Un botón llama a setCount(count + 1) en un handleClick, incrementando count y provocando un re-renderizado.
• Inicialización del estado con una función (lazy initialization):
  • Si el estado inicial requiere una computación costosa, se puede pasar una función a useState. Esta función se ejecutará solo una vez durante el renderizado inicial.
  const [data, setData] = useState(() => { const initialState = expensiveCalculation(); return initialState; });
• Advertencias y buenas prácticas:
  • Regla: No llamar Hooks dentro de bucles, condiciones o funciones anidadas. Deben llamarse en el nivel superior del componente funcional.
  • set sobrescribe el estado: Para actualizar objetos o arrays, se debe copiar el estado existente y luego aplicar los cambios (ej. setUser(prevUser => ({ ...prevUser, name: 'Jane' }))).
  • Pasar una función a setState: Es una buena práctica para actualizaciones basadas en el estado anterior (ej. setCount(prevCount => prevCount + 1)), especialmente para manejar actualizaciones asíncronas.

III. El Hook useEffect: Manejando Efectos Secundarios

• Propósito: Permite realizar “efectos secundarios” en componentes funcionales, que son acciones fuera del flujo normal de renderizado pero necesarias para la aplicación. Equivalente a métodos de ciclo de vida en componentes de clase (componentDidMount, componentDidUpdate, componentWillUnmount).
• Ejemplos de efectos secundarios: Peticiones HTTP, suscripciones, manipulación manual del DOM (document.title), temporizadores (setTimeout).
• Sintaxis básica:
  • import React, { useState, useEffect } from 'react';
useEffect(() => { // Código del efecto
return () => { // Función de limpieza (opcional)
}; }, [dependencias]); // Array de dependencias (opcional)
  • Función de efecto: Código a ejecutar después de cada renderizado (por defecto).
  • Función de limpieza: Se ejecuta antes del próximo efecto o al desmontar el componente. Esencial para evitar fugas de memoria (ej. removeEventListener).
  • Array de dependencias: Controla cuándo se ejecuta el efecto.
• Comportamiento según el array de dependencias:
  • Sin array: Se ejecuta después de CADA renderizado. Usar con precaución.
  • Array vacío ([]): Se ejecuta SOLO UNA VEZ al montar el componente (similar a componentDidMount). Ideal para peticiones iniciales o configuraciones.
  • Array con dependencias ([prop1, state2]): Se ejecuta al montar y CADA VEZ que alguna dependencia en el array CAMBIA.
• Ejemplos prácticos:
  • Actualizar el título del documento:useEffect(() => { document.title = `Has hecho clic ${count} veces`; }, [count]); // Se ejecuta cuando 'count' cambia

IV. Reglas de Oro de los Hooks

• Regla 1: Solo llamar Hooks en el nivel superior de una función de React.
  • No llamar Hooks dentro de bucles, condicionales o funciones anidadas.
  • No llamarlos después de un return condicional, en manejadores de eventos o en componentes de clase.
  • Motivación: React se basa en el orden de las llamadas a los Hooks para mantener su estado.
• Regla 2: Solo llamar Hooks desde funciones de React.
  • Llamar Hooks desde componentes funcionales de React o desde Hooks personalizados.
  • No llamarlos desde funciones JavaScript regulares.
  • Motivación: Asegura que los Hooks se usen dentro del contexto de React.
• Herramientas de ayuda: El plugin eslint-plugin-react-hooks detecta violaciones de estas reglas.

V. Ejemplos Prácticos Integrados: Contador y Título Dinámico

• Componente ContadorDinamico:
  • Utiliza useState para count (inicializado a 0).
  • Utiliza useEffect con [count] como dependencia para actualizar document.title cada vez que count cambia.
  • Incluye botones para incrementar y decrementar count.
  • Interacción: El renderizado inicial establece el título a “Contador: 0 clicks”. Cada clic actualiza el estado count, provoca un re-renderizado y la re-ejecución del useEffect, sincronizando el título del navegador con el valor del contador.

VI. Práctica Adicional: Cambiar Color de Fondo al Hacer Clic

• Componente ColorChanger:
  • Utiliza useState para backgroundColor (inicializado a 'white').
  • La función handleClick alterna el valor de backgroundColor entre 'white' y 'lightblue'.
  • Un div padre aplica el estilo de fondo dinámicamente usando style={{ backgroundColor: backgroundColor }}.
  • Puntos clave: Demuestra cómo useState puede manejar valores para estilos dinámicos y cómo el cambio de estado actualiza la interfaz visualmente.

VII. Conclusión

• useState y useEffect son pilares fundamentales para componentes funcionales en React.
• useState permite la gestión de estado local.
• useEffect permite el manejo de efectos secundarios y la integración con el entorno de React.
• Es crucial seguir las Reglas de los Hooks para asegurar la predictibilidad y estabilidad de la aplicación.
• Animense a explorar otros Hooks (useContext, useReducer, useRef) y a crear Hooks personalizados.
• La práctica activa en proyectos es la mejor manera de dominar estos conceptos.

Referencias

• Documentación oficial de React sobre Hooks:
  • Hooks de un vistazo
  • Usando el Hook de estado
  • Usando el Hook de efecto
  • Reglas de los Hooks