Description
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
Reproduce
- Clone https://github.com/axules/react-context-research.git
- npm i
- npm start
- Open http://localhost:3003 in Chrome
- Open dev tools in Chrome
- 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