Explicación de ¿Qué significa 'elevar el estado' en React?

Elevar el estado en React se refiere a la práctica de mover el estado de un componente a un ancestro común de componentes que lo necesiten. Esto puede ser útil cuando tienes varios componentes que necesitan compartir el mismo estado.

Para entender esto con mayor claridad, considera el siguiente ejemplo. Imagina que tienes un componente Padre que tiene dos componentes hijos, HijoA y HijoB. En un escenario donde HijoA y HijoB necesitan compartir algún estado, la forma más clara de manejar esto en React es mover ese estado al componente Padre. Luego, el componente Padre puede pasar el estado y la función para modificarlo a HijoA y HijoB como atributos.

class Padre extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      estadoCompartido: 'valor inicial',
    };
  }

  manejarCambio = (nuevoValor) => {
    this.setState({
      estadoCompartido: nuevoValor,
    });
  };

  render() {
    return (
      <div>
        <HijoA 
          estadoCompartido={this.state.estadoCompartido} 
          manejarCambio={this.manejarCambio}
        />
        <HijoB 
          estadoCompartido={this.state.estadoCompartido}
          manejarCambio={this.manejarCambio} 
        />
      </div>
    );
  }
}

En este ejemplo, HijoA y HijoB tienen ahora acceso al mismo estado y al método manejarCambio, que les permite modificar el estado compartido.

Elevar el estado promueve un flujo de datos unidireccional, lo que puede hacer que tu aplicación sea más predecible y fácil de rastrear. Como resultado, esta es una práctica recomendada en React cuando se manejan estados que necesitan ser compartidos entre componentes.