Introducción a useState en React (para principiantes)

Cuando empezamos a aprender React, uno de los primeros conceptos importantes es el estado. El estado nos permite guardar información dentro de un componente y hacer que la interfaz cambie cuando esa información cambia.

En React, el hook más básico para manejar estado se llama useState.

---

¿Qué es useState?

useState es una función que nos permite:

• Guardar un valor dentro de un componente
• Actualizar ese valor
• Hacer que el componente se vuelva a renderizar cuando el valor cambia

En pocas palabras: useState sirve para manejar datos que pueden cambiar en el tiempo.

---

Importar useState

Antes de usarlo, debemos importarlo desde React:

import { useState } from "react";

---

Estructura básica de useState

La forma más común de usar useState es esta:

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

¿Qué significa esto?

• estado: es el valor actual
• setEstado: es la función que usamos para cambiar el valor
• valorInicial: es el valor con el que empieza el estado

Ejemplo simple:

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

• contador empieza en 0
• setContador sirve para cambiar ese número

---

Ejemplo 1: Contador básico

Este es el ejemplo clásico para entender useState.

import { useState } from "react";

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

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

export default Contador;

¿Qué está pasando aquí?

1. contador guarda un número

2. Al hacer clic en el botón:

   • Se ejecuta setContador(contador + 1)
   • El valor cambia
   • React vuelve a renderizar el componente

3. El número en pantalla se actualiza automáticamente

---

Ejemplo 2: Manejar texto (input)

useState no solo sirve para números, también para texto.

import { useState } from "react";

function Nombre() {
  const [nombre, setNombre] = useState("");

  return (
    <div>
      <input
        type="text"
        value={nombre}
        onChange={(e) => setNombre(e.target.value)}
      />
      <p>Hola, {nombre}</p>
    </div>
  );
}

export default Nombre;

Explicación simple

• nombre guarda lo que el usuario escribe
• onChange detecta cada cambio del input
• setNombre actualiza el estado
• El texto se muestra en tiempo real

---

Ejemplo 3: Estado booleano (true / false)

Muy común para mostrar u ocultar cosas.

import { useState } from "react";

function MostrarTexto() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        Mostrar / Ocultar
      </button>

      {visible && <p>Este texto es visible</p>}
    </div>
  );
}

export default MostrarTexto;

¿Qué aprendemos aquí?

• visible solo puede ser true o false
• !visible invierte el valor
• React muestra el texto solo si visible es true

---

Reglas importantes de useState

1. Solo se usa dentro de componentes
2. No se puede usar dentro de condicionales o bucles
3. Nunca modifiques el estado directamente

Incorrecto:

contador = contador + 1;

Correcto:

setContador(contador + 1);