levantar el estado (lifting state up)
Exactamente, has identificado un patrón fundamental en React: levantar el estado (lifting state up). El ejemplo que muestras tiene el estado local dentro del componente FormularioBasico, pero en aplicaciones reales es común mover ese estado al componente padre. Esto permite:
¿Por qué mover el estado al padre?
Compartir datos entre componentes hermanos
Mantener una única fuente de verdad
Facilitar la comunicación entre componentes
Centralizar la lógica de negocio
Ejemplo con Estado en el Padre
jsx
// Componente PADRE
import React, { useState } from 'react';
import Formulario from './Formulario';
import Mostrador from './Mostrador';
function App() {
// Estado ahora está en el padre
const [texto, setTexto] = useState('');
const [historico, setHistorico] = useState([]);
// Función para actualizar el texto
const manejarCambio = (nuevoTexto) => {
setTexto(nuevoTexto);
};
// Función para manejar el envío
const manejarEnvio = () => {
if (texto.trim()) {
setHistorico([...historico, texto]);
setTexto('');
}
};
return (
<div>
{/* Paso el estado y funciones como props */}
<Formulario
texto={texto}
onCambio={manejarCambio}
onEnvio={manejarEnvio}
/>
{/* Otro componente que también necesita acceso al texto */}
<Mostrador texto={texto} historico={historico} />
</div>
);
}
export default App;
jsx
// Componente HIJO (Formulario.jsx)
import React from 'react';
function Formulario({ texto, onCambio, onEnvio }) {
const manejarSubmit = (e) => {
e.preventDefault();
onEnvio();
};
return (
<form onSubmit={manejarSubmit}>
<label>
Escribe algo:
<input
type="text"
value={texto}
onChange={(e) => onCambio(e.target.value)}
placeholder="Escribe aquí..."
/>
</label>
<button type="submit">Enviar</button>
</form>
);
}
export default Formulario;
Ventajas de este enfoque:
¿Cuándo usar cada enfoque?
Estado local (tu ejemplo):
Componentes pequeños y aislados
Formularios independientes
Prototipos rápidos
Estado que no necesita ser compartido
Estado en el padre:
Datos que varios componentes necesitan
Formularios que afectan otras partes de la UI
Aplicaciones con múltiples componentes interconectados
Cuando necesitas pasar datos a componentes hermanos
Patrón intermedio: Formulario controlado
jsx
// El formulario maneja UI, pero recibe valor y callbacks del padre
function FormularioControllado({ value, onChange, onSubmit }) {
return (
<form onSubmit={onSubmit}>
<input
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
/>
<button type="submit">Enviar</button>
</form>
);
}
Conclusión: Tu ejemplo es perfecto para entender los conceptos básicos, pero en aplicaciones reales, efectivamente se suele "levantar el estado" al componente padre para mejor arquitectura y mantenibilidad.
Comentarios
Publicar un comentario