State lifting: compartir estado entre componentes

El problema: dos componentes necesitan el mismo dato

Imagina un conversor de temperatura. Tienes un input para Celsius y otro para Fahrenheit. Cuando escribes en uno, el otro debe actualizarse automáticamente.

Si cada input tiene su propio estado, ¿cómo se enteraría uno del cambio del otro? Las props solo fluyen hacia abajo (del padre al hijo), no de hermano a hermano.

La solución: elevar el estado

El truco es simple: mueve el estado al ancestro común más cercano. En vez de que cada hijo tenga su propio estado, el padre lo tiene y se lo pasa a ambos hijos como props.

El patrón paso a paso

1. El estado vive en el padre

2. El padre pasa datos y funciones como props

3. Los hijos llaman a la función del padre para modificar

Cuando el hijo llama a onTemperatureChange, está ejecutando la función del padre → el padre actualiza su estado → re-renderiza → ambos hijos reciben las props nuevas.

El flujo completo

1. El usuario escribe "100" en el input de Celsius
2. onChange llama a onTemperatureChange("100") → función del padre
3. El padre ejecuta setTemperature("100") y setScale("celsius")
4. React re-renderiza App con los nuevos valores
5. App calcula: Celsius = 100, Fahrenheit = 212
6. Ambos inputs reciben sus nuevos valores como props

El input de Celsius muestra "100", el de Fahrenheit muestra "212". Todo sincronizado.

Un ejemplo más simple: contador compartido

DisplayCount lee el dato, Controls lo modifica, y App lo orquesta todo. Los hijos no se conocen entre sí — solo se comunican a través del padre.

¿Cuándo elevar el estado?

• Cuando dos o más componentes hermanos necesitan acceder al mismo dato
• Cuando un componente necesita reaccionar a cambios en otro
• Cuando necesitas sincronizar valores entre componentes

Tu desafío 🚀

Completa el conversor de temperatura:

1. En App.js, crea estados para la temperatura y la escala
2. Calcula la conversión entre Celsius y Fahrenheit
3. Usa <TemperatureInput /> dos veces, pasando las props necesarias
4. Comprueba como al escribir en uno de los inputs, el otro se actualiza automáticamente

El componente TemperatureInput.js ya está creado. Tu trabajo es orquestarlo desde App.

State lifting es uno de los patrones más fundamentales de React. Es la respuesta a "¿cómo comparto datos entre componentes?" en la mayoría de los casos.