Lifting state up: compartir estado entre componentes

A menudo dos componentes necesitan el MISMO estado: un input que agrega y una lista que muestra, un filtro y los resultados que filtra. Como las props solo fluyen hacia abajo, la solución es subir el estado al ancestro común de ambos —el patrón "lifting state up"—. Es la forma en que React coordina componentes, y entenderlo bien es entender cómo se estructura una app entera.

El termostato compartido de la casa

El problema: estado duplicado se descoordina

Si un input tiene su estado y una lista tiene el suyo, no pueden coordinarse: el input no puede agregar a la lista del otro. La solución es que el PADRE tenga el estado, y se lo pase a ambos:

Fíjate en el reparto: el PADRE (App) es el dueño del estado gastos. Agregar no tiene la lista —solo llama onAgregar cuando el usuario envía (evento hacia arriba)—. Lista no tiene la lista tampoco —la recibe por props (datos hacia abajo)—. El padre coordina a ambos: cuando Agregar avisa, el padre actualiza el estado, y Lista se re-renderiza con los nuevos datos. Los dos hijos comparten un estado que ninguno posee.

El procedimiento de lifting

La otra cara: no subas de más

Lifting es la respuesta cuando el estado se COMPARTE. Pero no subas TODO al tope por costumbre:

Mini-reto

Coordina dos componentes: 1) un <Slider> (input range) y un <Precio> que muestra un valor calculado con ese slider; 2) sube el estado del slider al padre y pásalo a ambos; 3) agrega un <Resumen> que también lea ese valor. Comprueba que mover el slider actualiza los tres, porque comparten una fuente de verdad en el padre. Siente cómo el ancestro común coordina.

Qué sigue

Con useState y lifting manejas la mayoría del estado. Pero cuando la lógica se complica —muchas acciones que cambian el estado de formas distintas—, hay una herramienta más ordenada: useReducer. Y te va a sonar muchísimo, porque es EXACTAMENTE el reducer con acciones discriminadas que construiste en el supercurso de TypeScript.