28. useState
Tutorial: useState en React
📌 Introducción
useState es uno de los Hooks más importantes de React. Nos permite agregar estado a componentes funcionales. Antes de los Hooks, solo los componentes de clase podían tener estado.
🎯 ¿Qué es un Hook?
Un Hook es una función especial que te permite "engancharte" a características de React. useState es el Hook más básico y esencial.
📖 Sintaxis Básica
jsx
const [estado, setEstado] = useState(valorInicial);
estado: Variable que contiene el valor actual del estado
setEstado: Función para actualizar el estado
valorInicial: Valor con el que inicia el estado (puede ser número, string, booleano, array, objeto, etc.)
🔧 Configuración Inicial
Primero, necesitamos configurar nuestro proyecto. El archivo principal index.jsx debe importar y renderizar nuestro componente:
jsx
// index.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { Prueba } from "./components/Prueba";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Prueba />
</React.StrictMode>
);
🚀 Ejemplo 1: Contador de Likes Básico
Vamos a crear un componente que muestre y permita aumentar "likes":
jsx
// components/Prueba.jsx
import { useState } from "react";
export function Prueba() {
const [likes, setLikes] = useState(0);
return (
<div>
<h1>Likes: {likes}</h1>
</div>
);
}
Explicación:
Importamos useState desde React
Inicializamos el estado likes con valor 0
Mostramos el valor actual en el HTML
🎮 Ejemplo 2: Agregando Interacción
Ahora agregamos un botón para aumentar los likes:
jsx
import { useState } from "react";
export function Prueba() {
const [likes, setLikes] = useState(0);
return (
<div>
<h1>Likes: {likes}</h1>
<button onClick={() => setLikes(likes + 1)}>
Dar like
</button>
</div>
);
}
🛠️ Ejemplo 3: Funciones Separadas
Es buena práctica separar la lógica en funciones:
jsx
import { useState } from "react";
export function Prueba() {
const [likes, setLikes] = useState(149);
const darLike = () => {
setLikes(likes + 1);
};
const quitarLike = () => {
setLikes(likes - 1);
};
return (
<div>
<h1>Likes: {likes}</h1>
<button onClick={darLike}>
Dar like
</button>
<button onClick={quitarLike}>
Quitar like
</button>
</div>
);
}
🌗 Ejemplo 4: Toggle (Alternar) entre Estados
useState también funciona con booleanos. Vamos a crear un interruptor de tema claro/oscuro:
jsx
import { useState } from "react";
export function Prueba() {
const [temaOscuro, setTemaOscuro] = useState(false);
const cambiarTema = () => {
// Cambiamos al valor opuesto del actual
setTemaOscuro(!temaOscuro);
console.log("Tema actual:", !temaOscuro ? "oscuro" : "claro");
};
return (
<div>
<h1>Tema: {temaOscuro ? "🌙 Oscuro" : "☀️ Claro"}</h1>
<button onClick={cambiarTema}>
Cambiar tema
</button>
</div>
);
}
💡 Puntos Clave a Recordar
Importa siempre useState: import { useState } from "react";
Los hooks solo en componentes funcionales: No los uses en componentes de clase
Llama hooks al nivel superior: No dentro de bucles, condiciones o funciones anidadas
React actualiza la UI automáticamente: Cuando cambias el estado con setEstado, React se encarga de re-renderizar
El estado es independiente por componente: Cada instancia del componente tiene su propio estado
🎯 Ejercicio Práctico
Crea un componente que:
Muestre un contador que empiece en 10
Tenga botones para aumentar y disminuir
Tenga un botón para resetear a 10
Muestre un mensaje diferente si el número es par o impar
📚 Resumen
useState nos permite:
✅ Agregar estado a componentes funcionales
✅ Mantener datos que cambian con el tiempo
✅ Actualizar la UI automáticamente cuando el estado cambia
✅ Crear componentes interactivos y dinámicos
¡La magia de React no es magia negra, es useState! 🎩✨
🔗 Próximos Pasos
Aprender sobre useEffect para manejar efectos secundarios
Explorar useContext para manejo de estado global
Practicar con estados más complejos (arrays, objetos)
¡Manos a la obra! Practica, equivócate, depura y aprende. ¡Así se domina React!
***********************************************************
useState de React: Explicación clara y sencilla
useState es un hook de React que nos permite agregar estado a componentes funcionales.
Concepto básico
Imagina que tienes una variable que, cuando cambia, React debe volver a mostrar (renderizar) el componente para reflejar ese cambio. Ahí necesitas useState.
Sin useState (no funciona bien):
jsx
function Contador() {
let contador = 0;
const incrementar = () => {
contador += 1;
console.log(contador); // Cambia, pero React no lo muestra
};
return (
<div>
<p>Contador: {contador}</p>
<button onClick={incrementar}>+1</button>
</div>
);
}
Con useState (funciona correctamente):
jsx
import { useState } from 'react';
function Contador() {
// useState devuelve un array con dos elementos:
// [valorActual, funciónParaCambiarlo]
const [contador, setContador] = useState(0);
const incrementar = () => {
// setContador actualiza el valor y React re-renderiza
setContador(contador + 1);
};
return (
<div>
<p>Contador: {contador}</p>
<button onClick={incrementar}>+1</button>
</div>
);
}
Sintaxis básica
javascript
const [estado, setEstado] = useState(valorInicial);
estado: Variable que almacena el valor actual
setEstado: Función para actualizar el estado
valorInicial: Valor inicial del estado (puede ser cualquier tipo)
Ejemplos prácticos
1. Contador simple
jsx
function Contador() {
const [contador, setContador] = useState(0);
return (
<div>
<p>Valor: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Aumentar</button>
<button onClick={() => setContador(contador - 1)}>Disminuir</button>
<button onClick={() => setContador(0)}>Reiniciar</button>
</div>
);
}
2. Mostrar/ocultar elemento
jsx
function MostrarOcultar() {
const [mostrar, setMostrar] = useState(false);
return (
<div>
<button onClick={() => setMostrar(!mostrar)}>
{mostrar ? 'Ocultar' : 'Mostrar'} texto
</button>
{mostrar && <p>¡Texto secreto revelado!</p>}
</div>
);
}
3. Input de formulario
jsx
function Formulario() {
const [nombre, setNombre] = useState('');
const [edad, setEdad] = useState('');
const manejarSubmit = (e) => {
e.preventDefault();
alert(`Hola ${nombre}, tienes ${edad} años`);
};
return (
<form onSubmit={manejarSubmit}>
<input
type="text"
placeholder="Tu nombre"
value={nombre}
onChange={(e) => setNombre(e.target.value)}
/>
<input
type="number"
placeholder="Tu edad"
value={edad}
onChange={(e) => setEdad(e.target.value)}
/>
<button type="submit">Enviar</button>
<p>Nombre: {nombre} | Edad: {edad}</p>
</form>
);
}
4. Lista de tareas simple
jsx
function ListaTareas() {
const [tareas, setTareas] = useState([]);
const [nuevaTarea, setNuevaTarea] = useState('');
const agregarTarea = () => {
if (nuevaTarea.trim()) {
setTareas([...tareas, nuevaTarea]);
setNuevaTarea('');
}
};
const eliminarTarea = (index) => {
setTareas(tareas.filter((_, i) => i !== index));
};
return (
<div>
<input
value={nuevaTarea}
onChange={(e) => setNuevaTarea(e.target.value)}
placeholder="Nueva tarea"
/>
<button onClick={agregarTarea}>Agregar</button>
<ul>
{tareas.map((tarea, index) => (
<li key={index}>
{tarea}
<button onClick={() => eliminarTarea(index)}>Eliminar</button>
</li>
))}
</ul>
</div>
);
}
Reglas importantes de useState
Solo en componentes funcionales: No se puede usar en componentes de clase
Llamar siempre al inicio: No dentro de condicionales, bucles o funciones anidadas
Los cambios son asíncronos: El estado no cambia inmediatamente después de llamar a setEstado
Re-renderizado: Cada cambio de estado hace que React vuelva a renderizar el componente
Tipos de datos comunes
jsx
// String
const [nombre, setNombre] = useState('Juan');
// Number
const [edad, setEdad] = useState(25);
// Boolean
const [activo, setActivo] = useState(true);
// Array
const [lista, setLista] = useState([]);
// Object
const [usuario, setUsuario] = useState({ nombre: '', edad: 0 });
// Multiple estados
const [contador, setContador] = useState(0);
const [texto, setTexto] = useState('');
Consejos para principiantes
Nombres descriptivos: [user, setUser] en lugar de [data, setData]
Actualización de objetos/arrays: Usa spread operator para no mutar el estado
jsx
// Correcto para objetos
setUsuario({...usuario, nombre: 'Nuevo nombre'});
// Correcto para arrays
setLista([...lista, nuevoElemento]);
Estado inicial complejo: Puedes usar funciones para el valor inicial
jsx
const [datos, setDatos] = useState(() => {
// Cálculo inicial complejo
return calcularValorInicial();
});
Comentarios
Publicar un comentario