React Context issue

[zenios]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
One context consumer has a value of another contexts provider.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem:

Example

const React = require("react");
const { renderToString } = require("react-dom/server");

const {
  Provider: LocationContextProvider,
  Consumer: LocationContextConsumer
} = React.createContext("location");
const {
  Provider: BaseContextProvider,
  Consumer: BaseContextConsumer
} = React.createContext("base");

const e = React.createElement;
const html = () =>
  renderToString(
    e(
      LocationContextProvider,
      { value: "location" },
      e(BaseContextConsumer, null, baseContextValue =>
        e(LocationContextConsumer, null, locationContextValue =>
          e(
            BaseContextProvider,
            { value: "base" },
            e("span", null, `${locationContextValue} - ${baseContextValue}`)
          )
        )
      )
    )
  );

console.log("1st attempt", html());
console.log("2nd attempt", html());

Output

1st attempt <span>location - base</span>
2nd attempt <span>location - location</span>

What is the expected behavior?
1st attempt and 2nd attempt to produce the same result

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.3 - 16.4
All OS
The issue does not appear on version prior react 16.3 using the create-react-context polyfill

Notes
This issue was found while trying to use Ryan's new reach/router and SSR which does something like the example above.

After communicating with him, Ryan opened the following issue on his repository.

[aweary]

Thanks for the report @zenios! I looked into this a bit and wrote up a failing test with some background here #12974.

[gaearon]

This is fixed in 16.4.1.