Playing with the new React Context API

DemoContext.jsx

/**
 * This a very small example of a HoC that used the new react context API that can be used to save a 
 * state globally without using any state library.
 * 
 * This is a toy gist just to demo what you can do, please don't copy & paste the code without reading: 
 * https://reactjs.org/docs/context.htmt
 */
import React, { PureComponent } from 'react';

const defaultContextValue = {
  something: "blue"
};

const { Provider, Consumer } = React.createContext();

export class DemoContextProvider extends PureComponent {
    state = {
        something: 'borrow',
        doing: 0
    }
    constructor(props) {
        super(props);
        this.state.doSomething = this.doSomething
    }
    doSomething = () => {
        this.setState((prevState) => ({ doing: ++prevState.doing }));
    }
    render() {
        return (
            <Provider value={this.state}>
                {this.props.children}
            </Provider>
        );
    }
}

export const withDemoContext = WrappedComponent => (props) => {
    return (
        <Consumer>
            {context => <WrappedComponent {...props} demoContext={context} />}
        </Consumer>
    );
}

export default { DemoContextProvider, withDemoContext };

usage_child.jsx

import { withDemoContext } from './DemoContext';

const StatelessButton = ({ demoContext }) => {
  return (
    <div>
      it was called {`${demoContext.doing}`} times
      <button onClick={demoContext.doSomething}>test</button>
    </div>
  );
}
const ThemedButton = withDemoContext(StatelessButton);

usage_main.jsx

import { DemoContextProvider } from './DemoContext';

ReactDOM.render(
    <DemoContextProvider>
        <App />
    </DemoContextProvider>, 
    document.getElementById('root'));