React Hooks: Ciclo de Vida de un componente

6 de marzo de 2025
3 min lectura
By Sly & AI

Table of Contents

This is a list of all the sections in this post. Click on any of them to jump to that section.

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!