10.2-Explicación de qué es un ESTADO en React:
Explicación de qué es un ESTADO en React:
Un estado en React es datos que pueden cambiar durante la vida del componente y que causan que el componente se vuelva a renderizar cuando cambian.
📌 ¿Por qué taskText es un estado en TaskForm?
jsx
// En TaskForm.js
const [taskText, setTaskText] = useState('');
taskText ES UN ESTADO porque:
Cambia con el tiempo (cada vez que el usuario escribe)
Controla el valor del input: <input value={taskText} ... />
React necesita saber cuándo cambia para re-renderizar el input
Es local solo a este componente
📌 Diferencia entre ESTADO LOCAL y ESTADO GLOBAL (o compartido):
1. taskText (ESTADO LOCAL en TaskForm)
jsx
// Solo importa para TaskForm
const [taskText, setTaskText] = useState('');
// Usos:
// - Controlar el input: value={taskText}
// - Validar antes de enviar: if (taskText.trim() === '')
// - Limpiar después de enviar: setTaskText('')
¿Por qué es local y no está en App.js?
Solo el formulario necesita saber qué está escribiendo el usuario
Cuando se envía, el texto se pasa al padre y se limpia
Otros componentes no necesitan acceso al texto mientras se escribe
2. tasks (ESTADO GLOBAL/COMPARTIDO en App.js)
jsx
// En App.js - Estado compartido
const [tasks, setTasks] = useState([]);
// Usos:
// - TaskForm lo actualiza (agregando tareas)
// - TaskList lo muestra (lista de tareas)
// - Es el "estado de la verdad" de la aplicación
¿Por qué está en App.js?
Múltiples componentes necesitan acceder a él
TaskList necesita mostrarlo
TaskForm necesita actualizarlo
App es el "origen de la verdad"
📌 Visualización de los estados:
jsx
// App.js - Estado PRINCIPAL
function App() {
const [tasks, setTasks] = useState([]); // ← ESTADO GLOBAL
return (
<div className="App">
<TaskForm onAddTask={addTask} /> {/* No necesita tasks aquí */}
<TaskList tasks={tasks} /> {/* Recibe tasks como prop */}
</div>
);
}
// TaskForm.js - Estado LOCAL
function TaskForm({ onAddTask }) {
const [taskText, setTaskText] = useState(''); // ← ESTADO LOCAL
return (
<form>
<input value={taskText} /> {/* Controlado por estado local */}
</form>
);
}
// TaskList.js - Solo recibe props (NO tiene estado)
function TaskList({ tasks }) { // ← Solo recibe datos (props)
// No tiene estado propio
return <ul>{/* muestra tasks */}</ul>;
}
📌 ¿Por qué no se ve taskText en el return de App.js?
Porque App.js NO necesita saber qué está escribiendo el usuario en tiempo real.
El flujo es:
text
[Usuario escribe] → [TaskForm.state.taskText cambia] → [Input se actualiza]
(solo TaskForm sabe esto)
[Usuario presiona Enter] → [TaskForm llama onAddTask(taskText)]
→ [App actualiza su estado tasks]
📌 Ejemplo práctico: ¿Qué pasa si movemos taskText a App.js?
jsx
// ❌ FORMA INCORRECTA (pero técnicamente posible)
// App.js
const [taskText, setTaskText] = useState('');
const [tasks, setTasks] = useState([]);
return (
<div>
<TaskForm
taskText={taskText} // ← Paso como prop
onTextChange={setTaskText} // ← Paso función para cambiar
onAddTask={addTask}
/>
</div>
);
Problemas con este enfoque:
Re-renders innecesarios: Cada tecla haría re-renderizar TODO App.js
Complejidad innecesaria: App no necesita controlar el texto del input
Violación de responsabilidades: El formulario debe manejar su propio estado temporal
📌 Regla general en React:
📌 Resumen con analogía:
Imagina que estás haciendo una lista de compras:
taskText en TaskForm = El lápiz y papel donde escribes temporalmente un ítem antes de agregarlo a la lista
Solo tú (TaskForm) ves lo que estás escribiendo
Cuando terminas, pasas el ítem a la lista oficial
tasks en App.js = La lista oficial en la nevera
Todos en la casa (TaskList) pueden verla
Tú (TaskForm) puedes agregar cosas
Es la "fuente de la verdad"
El lápiz (taskText) no está en la nevera (App.js) porque solo lo usas temporalmente mientras escribes
Comentarios
Publicar un comentario