10.1-Estado en React - Explicación Sencilla
Estado en React - Explicación Sencilla
El estado en React es como la memoria de un componente. Es donde guardas datos que pueden cambiar con el tiempo y que afectan lo que se muestra en pantalla.
La Analogía del Semáforo 🚦
Imagina un semáforo:
Tiene estados: rojo, amarillo, verde
Cuando cambia de estado, cambia su aspecto visual
El estado actual determina qué color muestra
Conceptos Clave
1. Estado vs. Props
Props: Datos que se pasan DE PADRE A HIJO (como parámetros de función)
Estado: Datos que maneja EL COMPONENTE MISMO (como variables internas)
2. Por qué es especial el estado
Cuando el estado cambia, React vuelve a renderizar automáticamente el componente para mostrar los nuevos datos.
Ejemplo Práctico: Contador
jsx
import { useState } from 'react';
function Contador() {
// 1. Crear estado: [valorActual, funciónParaCambiarlo]
const [contador, setContador] = useState(0);
return (
<div>
<p>Has hecho clic {contador} veces</p>
{/* 2. Cambiar estado con setContador */}
<button onClick={() => setContador(contador + 1)}>
Haz clic aquí
</button>
</div>
);
}
Reglas de Oro ✨
NUNCA modifiques el estado directamente
jsx
// ❌ MAL
contador = contador + 1;
// ✅ BIEN
setContador(contador + 1);
El estado es inmutable: Siempre creas un nuevo valor
El estado es asíncrono: React puede agrupar varios cambios
Analogía Cotidiana 📱
Piensa en tu perfil de una red social:
Estado: Tu foto, nombre, número de seguidores
Cuando cambias tu foto: No editas la foto vieja, SUBES UNA NUEVA
El cambio se refleja automáticamente para todos
Cuándo usar estado
✅ SÍ usar estado para:
Datos que cambian con el tiempo
Lo que el usuario ve en pantalla
Información que responde a interacciones
❌ NO usar estado para:
Datos que no cambian
Valores calculados de otros estados (usa variables normales)
Información que viene de props
Resumen en 3 puntos
El estado = memoria del componente
Cuando cambia = vista se actualiza
Siempre se cambia con la función setter (nunca directamente)
¿Te gustaría que explique algún aspecto particular con más ejemplos?
Estados Locales vs Globales en React 🌍🏠
Te lo voy a explicar como si organizaras tu casa y tu vecindario:
La Analogía de la Casa y el Vecindario
Estado Local = Lo que hay dentro de TU CASA 🏠
Solo tú lo ves y controlas
Cada casa tiene sus propias cosas
Ejemplo: El desorden en tu habitación, lo que tienes en el refrigerador
Estado Global = Lo que hay en lugares COMUNES del vecindario 🌍
Todos los vecinos pueden verlo y usarlo
Hay un solo lugar donde se guarda
Ejemplo: El parque, el buzón comunitario, el área de juegos
Ejemplo Práctico
Estado Local - Solo un componente lo usa
jsx
function ContadorPersonal() {
// Estado LOCAL - solo este componente lo usa
const [misPuntos, setMisPuntos] = useState(0);
return (
<div>
<p>Mis puntos: {misPuntos}</p>
<button onClick={() => setMisPuntos(misPuntos + 1)}>
Sumar punto
</button>
</div>
);
}
Estado Global - Muchos componentes lo comparten
jsx
// Con Context API (React nativo)
import { createContext, useContext, useState } from 'react';
// 1. Crear el "área común" (Contexto)
const UsuarioContext = createContext();
function App() {
// 2. Estado GLOBAL - todos los componentes hijos pueden acceder
const [usuario, setUsuario] = useState("Juan");
return (
// 3. Proveer el estado a toda la aplicación
<UsuarioContext.Provider value={{ usuario, setUsuario }}>
<Perfil />
<Configuraciones />
<Amigos />
</UsuarioContext.Provider>
);
}
// Cualquier componente puede usar el estado global
function Perfil() {
const { usuario } = useContext(UsuarioContext);
return <h1>Bienvenido, {usuario}!</h1>;
}
Comparación Visual
¿Cuándo usar cada uno?
Usa Estado Local cuando:
Los datos solo le importan a UN componente
Es temporal (como lo escrito en un input)
No afecta a otros componentes
Es específico de una funcionalidad pequeña
jsx
// Ejemplo: Estado local para un formulario
function FormularioContacto() {
// LOCALES - solo este formulario los necesita
const [nombre, setNombre] = useState("");
const [email, setEmail] = useState("");
const [mensaje, setMensaje] = useState("");
// ... lógica del formulario
}
Usa Estado Global cuando:
Varios componentes NECESITAN los mismos datos
El usuario está autenticado
Preferencias de la app (tema, idioma)
Carrito de compras
Datos que vienen de una API
jsx
// Ejemplo: Estado global para carrito de compras
// Componente Producto
function Producto({ producto }) {
const { agregarAlCarrito } = useCarrito(); // Global
return <button onClick={() => agregarAlCarrito(producto)}>
Comprar
</button>;
}
// Componente Header - ve el mismo carrito
function Header() {
const { carrito } = useCarrito(); // Mismo estado global
return <span>Items en carrito: {carrito.length}</span>;
}
Flujo de Datos Típico
text
ESTADO GLOBAL (Usuario)
│
├───> Componente Perfil (lee: nombre)
│
├───> Componente Header (lee: foto)
│
└───> Componente Config (lee y escribe: preferencias)
│
└── Estado LOCAL (toggle temporal)
Herramientas para Estado Global
1. Context API (React Nativo) - Para proyectos pequeños/medianos
jsx
// Simple y directo, viene con React
const TemaContext = createContext();
2. Redux - Para proyectos grandes/complejos
jsx
// Más estructura, herramientas de desarrollo
// Necesita más configuración
3. Zustand / Jotai - Alternativas modernas
jsx
// Más simples que Redux, muy populares actualmente
Regla de Oro 🥇
Empieza con estado LOCAL y solo lleva a GLOBAL lo que realmente necesiten varios componentes.
"Eleva el estado solo cuando sea necesario" - Principio de React
Ejemplo Completo: App de Notas
jsx
function AppNotas() {
// GLOBAL: Todas las notas (varias partes las ven)
const [notas, setNotas] = useState([]);
return (
<NotasContext.Provider value={{ notas, setNotas }}>
<Sidebar /> {/* Muestra lista de notas */}
<Editor /> {/* Edita una nota seleccionada */}
<Buscador /> {/* Busca en todas las notas */}
</NotasContext.Provider>
);
}
function Editor() {
// LOCAL: Lo que escribo mientras edito
const [textoTemporal, setTextoTemporal] = useState("");
// GLOBAL: Para guardar definitivamente
const { setNotas } = useContext(NotasContext);
const guardarNota = () => {
// De LOCAL a GLOBAL
setNotas(prev => [...prev, textoTemporal]);
setTextoTemporal(""); // Vacío el local
};
return (
<textarea
value={textoTemporal}
onChange={(e) => setTextoTemporal(e.target.value)}
/>
);
}
Resumen en 2 líneas
Local = useState dentro del componente - para datos privados
Global = Context/Redux fuera del componente - para datos compartidos
¿Quieres que profundice en alguna herramienta específica o ver más ejemplos prácticos?
Comentarios
Publicar un comentario