💎 useState: manejar estados locales en componentes React

El Hook useState es uno de los más utilizados en React. Permite que un componente funcional mantenga y actualice su propio estado interno. Es decir, puedes guardar valores dinámicos (como contadores, textos o booleanos) que cambian durante la interacción del usuario.

---

1️⃣ Sintaxis básica

Para usar useState, primero lo importas desde React. Luego lo invocas dentro del componente para declarar una variable de estado y su función de actualización:

import React, { useState } from "react";

function Ejemplo() {
  const [valor, setValor] = useState(0);
  // valor → variable con el estado actual
  // setValor → función para actualizarlo

  return (
    <div>
      <p>El valor es: {valor}</p>
      <button onClick={() => setValor(valor + 1)}>Incrementar</button>
    </div>
  );
}

export default Ejemplo;
  

Contador simple

El valor es: 0

---

2️⃣ Múltiples estados en un componente

Puedes usar varios Hooks useState dentro del mismo componente para manejar diferentes variables independientes.

import React, { useState } from "react";

function Perfil() {
  const [nombre, setNombre] = useState("Ana");
  const [edad, setEdad] = useState(25);

  return (
    <div>
      <p>Nombre: {nombre}</p>
      <p>Edad: {edad}</p>
      <button onClick={() => setEdad(edad + 1)}>Cumplir años</button>
    </div>
  );
}

export default Perfil;
  

Perfil de usuario

Nombre: Ana

Edad: 25

---

3️⃣ Estados iniciales complejos

El valor inicial de useState también puede ser un objeto o un array. Esto es útil cuando tienes varios datos relacionados.

import React, { useState } from "react";

function Producto() {
  const [producto, setProducto] = useState({
    nombre: "Teclado Mecánico",
    precio: 59,
    disponible: true
  });

  return (
    <div>
      <h4>{producto.nombre}</h4>
      <p>Precio: ${producto.precio}</p>
      <p>Estado: {producto.disponible ? "Disponible" : "Agotado"}</p>
      <button onClick={() => setProducto({ ...producto, disponible: !producto.disponible })}>
        Cambiar disponibilidad
      </button>
    </div>
  );
}

export default Producto;
  

Teclado Mecánico

Precio: $59

Estado: Disponible

---

4️⃣ Buenas prácticas con useState

• ✅ Declara los Hooks siempre en el nivel superior del componente.
• ✅ Usa nombres descriptivos para el estado y su setter (user / setUser).
• ✅ Evita modificar el estado directamente —usa la función de actualización.
• ✅ Si el nuevo estado depende del anterior, usa una función actualizadora:

setContador(prevContador => prevContador + 1);
  

---

5️⃣ Resumen

El Hook useState permite manejar valores dinámicos dentro de los componentes de React. Es esencial para crear interfaces interactivas y controlar cómo cambia la información en tiempo real.

• ⚙️ Guarda datos locales en componentes.
• 🔄 Actualiza el valor y fuerza el re-renderizado.
• 📦 Puede manejar números, textos, booleanos, arrays u objetos.

---

← Volver al índice