UpdatableContextProvider.js

import React from 'react';

// Permit to create a provider/consumer but allow the consumer
// to also receive a setter to update the provider value
export const createUpdatableContext = () => {
  const { Provider, Consumer } = React.createContext(null);

  class UpdatableContextProvider extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        realValue: props.value,
        setter: value => {
          this.setState({ realValue: value });
        },
      };
    }

    render() {
      return <Provider value={this.state}>{this.props.children}</Provider>;
    }
  }

  class UpdatableContextConsumer extends React.Component {
    render() {
      return (
        <Consumer>
          {value => this.props.children(value.realValue, value.setter)}
        </Consumer>
      );
    }
  }

  return {
    Provider: UpdatableContextProvider,
    Consumer: UpdatableContextConsumer,
  };
};