Principiantereact
useState: Estado Local
El hook useState permite gestionar estado reactivo dentro de componentes funcionales.
Que es el estado
El estado es informacion que un componente mantiene y que puede cambiar con el tiempo. Cuando el estado cambia, React re-renderiza el componente automaticamente para reflejar los nuevos datos en la interfaz.
Uso basico de useState
useState retorna un array con dos elementos: el valor actual del estado y una funcion para actualizarlo.jsx
1import { useState } from "react";
2
3function Contador() {
4 const [count, setCount] = useState(0);
5
6 return (
7 <div>
8 <p>Contador: {count}</p>
9 <button onClick={() => setCount(count + 1)}>+1</button>
10 <button onClick={() => setCount(0)}>Reset</button>
11 </div>
12 );
13}Estado con objetos
Al actualizar objetos en el estado, debes crear una nueva referencia (spread operator). React compara por referencia, no por valor profundo.
jsx
1function FormularioContacto() {
2 const [form, setForm] = useState({
3 nombre: "",
4 email: "",
5 mensaje: ""
6 });
7
8 const handleChange = (e) => {
9 const { name, value } = e.target;
10 setForm(prev => ({ ...prev, [name]: value }));
11 };
12
13 return (
14 <form>
15 <input name="nombre" value={form.nombre} onChange={handleChange} />
16 <input name="email" value={form.email} onChange={handleChange} />
17 <textarea name="mensaje" value={form.mensaje} onChange={handleChange} />
18 </form>
19 );
20}Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (JAVASCRIPT)
Output