Detailed explanation of the new React context

example.jsx

const store = {
  observedBits: {
    foo: 0b01,
    bar: 0b10
  },
  state: {
    foo: 1,
    bar: 1,
  },
  update(cb) {
    this.state = cb(this.state);
  }
};
const StoreContext = React.createContext(
  store.state,
  (prev, next) => {
    let result = 0;
    // `foo` changed
    if (prev.foo !== next.foo) {
      result |= store.observedBits.foo;
    }
    // `bar` changed
    if (prev.bar !== next.bar) {
      result |= store.observedBits.bar;
    }
    return result;
  }
);
const Foo = () => (
  <StoreContext.Consumer unstable_observedBits={store.observedBits.foo}>
    {({foo, update}) => ( // if `bar` changes, this code will not be executed
      <button
        onClick={() => update((state) => ({...state, foo: state.foo + 1}))}
      >
        increment "foo = {foo}"
      </button>
    )}
  </StoreContext.Consumer>
);