42. useState - ¿Que es y para que se usa?
Tutorial: useState en React - ¿Qué es y para qué se usa?
Introducción a useState
useState es uno de los Hooks más importantes y utilizados en React. Es fundamental para construir aplicaciones interactivas y dinámicas.
¿Qué es useState?
Es un Hook de React que nos permite declarar y gestionar estado en componentes funcionales. Antes de los Hooks, solo podíamos usar estado en componentes de clase.
¿Para qué sirve?
Sirve para:
Declarar variables de estado en componentes funcionales
Actualizar el estado de manera reactiva
Mantener datos que pueden cambiar durante la vida del componente
Provocar re-renderizados cuando el estado cambia
Ejemplo Básico - Contador
jsx
import React, { useState } from 'react';
function Example() {
// Declaración de una variable de estado llamada "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Análisis del código:
Importación: import { useState } from 'react'
Declaración del estado: const [count, setCount] = useState(0);
count: Variable que almacena el valor actual del estado
setCount: Función para actualizar el valor de count
0: Valor inicial del estado
Uso del estado: {count} muestra el valor actual
Actualización del estado: setCount(count + 1) incrementa el valor
Comparación: Clases vs Hooks—-Con Clases (Antes):
jsx
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
Con Hooks (Ahora):
jsx
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Ventajas de useState
Código más limpio y conciso
No necesita clases ni this
Más fácil de leer y mantener
Reutilizable mediante custom hooks
Mejor organización del código
Características importantes
Actualización asíncrona: React puede agrupar múltiples actualizaciones
Re-renderizado automático: Cambiar el estado provoca un nuevo render
Persistencia entre renders: El estado se mantiene entre re-renderizados
Múltiples estados: Puedes usar useState varias veces en un componente
jsx
function UserProfile() {
const [name, setName] = useState('');
const [age, setAge] = useState(0);
const [email, setEmail] = useState('');
// ... más código
}
Resumen
useState es la herramienta fundamental para manejar estado en componentes funcionales de React. Permite:
✅ Declarar variables reactivas que, al cambiar, actualizan la UI
✅ Simplificar el código eliminando la necesidad de clases
✅ Crear aplicaciones interactivas de manera sencilla
✅ Mantener el estado local en cada componente
En el próximo tutorial, veremos más ejemplos prácticos de cómo usar useState en situaciones reales, incluyendo formularios, listas y estados complejos.
¡Espero que este tutorial te haya ayudado a entender el poder de useState!
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();
});
useState es tu herramienta principal para manejar datos que cambian con el tiempo en React. ¡Comienza con ejemplos simples y luego avanza a casos más complejos!
Comentarios
Publicar un comentario