Mucho se ha hablado de este excelente elemento/funcionalidad de React y en este tutorial estare mostrando funcionalidades basicas del uso de React Context apropiadamente.

Problematica

React Context viene a resolver la problematica de poder compartir ciertos valores con diferentes componentes hijos sin tener que pasar props por todo el arbol de componentes para simplemente ser usados en un componente al final de la lista.

Con la ayuda de React Context es posible poder definir una funcionalidad o valores en un componente root y estos ser compartirdos con cualquier componente en la herarquia sin tener que estar pasando estos valores de un componente a otro.

React Context

export class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hola App</h1>
        <h2>Tutorial React Context</h2>
        <ParentComponent />
      </div>
    );
  }
}

class ParentComponent extends Component {
  render() {
    return (
      <ChildComponent />
    );
  }
}

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <h4>Componente Hijo</h4>
      </div>
    );
  }
}

Imaginemos que tenemos una serie de componentes y necesitamos la informacion que un componente superior esta manejando y tenemos que buscar la forma de hacerle llegar esta informacion a un componente hijo.

Solución

Para solucionar esto estaremos dando uso a ReactContext.Provider y ReactContext.Consumer, el cual nos ayudara a poder definir una serie de valores el cual estaran disponibles para cualquier componente que quiera consumirlos.

const GlobalContext = React.createContext({});

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      valor: 0
    };
  }

  render() {
    return (
      <GlobalContext.Provider
        value={{ valor: this.state.valor, incrementar: this.incrementar }}
      >
        <div className="App">
          <h1>Hola App</h1>
          <h2>Tutorial React Context {this.state.valor}</h2>
          <button onClick={this.incrementar}>Incrementar</button>
          <ParentComponent />
        </div>
      </GlobalContext.Provider>
    );
  }

  incrementar = () => {
    this.setState(prevState => ({ valor: prevState.valor + 1 }));
  };
}

class ParentComponent extends Component {
  render() {
    return <ChildComponent />;
  }
}

class ChildComponent extends Component {
  render() {
    return (
      <GlobalContext.Consumer>
        {value => (
          <div>
            <h4>Componente Hijo {value.valor}</h4>
            <button onClick={value.incrementar}>Incrementar</button>
          </div>
        )}
      </GlobalContext.Consumer>
    );
  }
}

En el codigo anterior estamos dando uso de el api de React Context Provider y Context donde estamos compartiendo el estado del componente Root con el componente Hijo, y al mismo tiempo estamos compartiendo el metodo que actualiza el el estado de este, si bien es cierto que Redux se usa para manejar un estado global, Context es mas para este tipo de cosas donde no tenemos que Connectar un componente con el GlobalStore mas bien con un estado local de algun componente en particular.

Si quieren ver el codigo en vido de este ejemplos por favor visitar esta url:

Referencia

https://reactjs.org/docs/context.html

Image by Pexels from Pixabay