React Hooks: Ciclo de Vida de un componente

Desde la introducción de React Hooks en la versión 16.8, la gestión del estado y el ciclo de vida en los componentes funcionales se ha vuelto mucho más sencilla y poderosa. Antes de los hooks, los desarrolladores dependían de componentes de clase para manejar el estado y los efectos secundarios, lo que a menudo generaba código más complejo y difícil de mantener.

En este artículo, exploraremos los principales hooks de React, sus aplicaciones y ejemplos prácticos para entender cómo pueden mejorar la estructura y rendimiento de nuestras aplicaciones.

1. useState: Manejo de Estado Local

El hook useState permite gestionar el estado en un componente funcional de manera sencilla.

Ejemplo: Contador Simple

import { useState } from "react";

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

Aplicación en la Vida Real: Gestión de Carrito de Compras

function Carrito() {
  const [productos, setProductos] = useState([]);

  const agregarProducto = (producto) => {
    setProductos([...productos, producto]);
  };

  return (
    <div>
      <h2>Carrito de Compras</h2>
      <button onClick={() => agregarProducto({ id: 1, nombre: "Laptop" })}>
        Agregar Laptop
      </button>
      <ul>
        {productos.map((p) => (
          <li key={p.id}>{p.nombre}</li>
        ))}
      </ul>
    </div>
  );
}

2. useEffect: Manejo de Efectos Secundarios

useEffect permite ejecutar código cuando el componente se monta, actualiza o desmonta.

Ejemplo: Llamada a una API al Montar el Componente

import { useEffect, useState } from "react";

function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => setUsuarios(data));
  }, []);

  return (
    <ul>
      {usuarios.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Aplicación en la Vida Real: Guardado Automático en Local Storage

import { useEffect, useState } from "react";

function Notas() {
  const [nota, setNota] = useState(
    localStorage.getItem("nota") || "Escribe algo...",
  );

  useEffect(() => {
    localStorage.setItem("nota", nota);
  }, [nota]);

  return <textarea value={nota} onChange={(e) => setNota(e.target.value)} />;
}

3. useContext: Uso de Contexto Global

useContext facilita la gestión de datos compartidos entre componentes sin necesidad de prop drilling.

Ejemplo: Contexto de Tema Global

import { createContext, useContext, useState } from "react";

const TemaContext = createContext();

function ProveedorTema({ children }) {
  const [tema, setTema] = useState("light");
  return (
    <TemaContext.Provider value={{ tema, setTema }}>
      {children}
    </TemaContext.Provider>
  );
}

function BotonTema() {
  const { tema, setTema } = useContext(TemaContext);
  return (
    <button onClick={() => setTema(tema === "light" ? "dark" : "light")}>
      Cambiar a {tema === "light" ? "Oscuro" : "Claro"}
    </button>
  );
}

React Hooks han revolucionado la forma en que gestionamos el estado y el ciclo de vida en las aplicaciones modernas. Con useState, useEffect y useContext, podemos escribir código más limpio, reutilizable y eficiente.

Si aún no has experimentado con hooks, ahora es el momento ideal para adoptarlos y mejorar tu flujo de desarrollo en React. ¡Explora sus posibilidades y haz tu código más elegante y escalable!