React: Strange beahvior React + new Context API

[axules]

I think it is a bug.

Git with example - https://github.com/axules/react-context-research

npm i
npm start
go to http://localhost:3003

Dependencies
React v16.3.2
Chrome v65.0.3325.181

Components

Context - OrderDetailsContext
Root component - OrdersView
Simple component - OrdersViewRow
Subscribed component - OrderDetailsView

Problem

Application have one dynamic context (OrderDetailsContext) and 3 components: one root component (OrdersView) and 2 children components (OrdersViewRow and OrderDetailsView). Only one component (OrderDetailsView) subscribed to dynamic context and have to be refreshed once context data is changed. But with them we have problem.
When context is changed the subscribed component is not refreshed and have old version of context data.

actual

OrderDetailsView do not update once context is updated.

expected

OrderDetailsView will update once context is updated.

First solution

Go to OrdersView and move OrderDetailsView to the top of render function, then subscribed component will be updated when context is changed.

Second strange solution

Go to separeted component (OrdersViewRow) and just remove <td>Remove this td and I will work!</td>, then subscribed component will be updated when context is changed.

Video

https://youtu.be/WET0a2hApwM

Reproduce

1. Clone https://github.com/axules/react-context-research.git
2. npm i
3. npm start
4. Open http://localhost:3003 in Chrome
5. Open dev tools in Chrome
6. Click on View button

expected

• 'Loading...' text should be visibled and hidden after.
• Text should be updated and new number should be displayed.
• console log should be
  

actual

• 'Loading...' text is not visibled.
• Text is not changed.
• console log is
  

[gaearon]

Thanks for the report—any chance you could condense your findings into a small isolated example with a brief description? This is a lot to sift through.

[axules]

@gaearon, I did it. Description of Issue and video were updated. Example is very simple and small app at present.

[gaearon]

This is a bug.

[gaearon]

https://github.com/facebook/react/pull/12708 should fix this.

[gaearon]

@axules Thanks for a great reproducing case, it was extremely helpful