¿Qué significa subir el estado (lifting state up)?

Question

Accepted Answer

**Subir el estado (lifting state up)** significa mover el estado de un componente hijo a un **padre común** para que múltiples hijos puedan compartir y mantenerse sincronizados con los mismos datos. Es la solución estándar cuando componentes hermanos necesitan coordinarse. ## Por qué es importante: hermanos necesitan datos compartidos ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` Si dos componentes hermanos tienen cada uno su propia copia del estado relacionado, no hay forma de mantenerlos consistentes — cambiar uno no afecta al otro. ## La solución: subir el estado al padre ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` El estado compartido ahora vive en el padre (`Calculator`). Pasa el valor *hacia abajo* como una prop y un setter para que los hijos puedan solicitar cambios (*hacia arriba*). Ahora ambas entradas reflejan la misma fuente — editar una actualiza la otra. ## El patrón ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` Este es el mismo flujo "datos hacia abajo, eventos hacia arriba", aplicado para hacer el estado compartido. ## Cuando subir el estado es demasiado ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## Por qué es importante Subir el estado es la técnica fundamental para **compartir estado entre componentes hermanos/relacionados** en frameworks basados en componentes — mantiene una única fuente de verdad en un padre común para que los hijos se mantengan sincronizados. A menudo es la *primera* herramienta a considerar antes de agregar Context o un store. Reconocer cuándo subir el estado (los hermanos necesitan coordinarse) — y cuándo subir el estado ha ido demasiado lejos (causando prop drilling, por lo que es hora de Context/un store) — es fundamental para estructurar bien el estado de los componentes.