Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Strange beahvior React + new Context API #12686

Closed
axules opened this issue Apr 25, 2018 · 5 comments
Closed

Strange beahvior React + new Context API #12686

axules opened this issue Apr 25, 2018 · 5 comments

Comments

@axules
Copy link

axules commented Apr 25, 2018

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.
image

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
    image

actual

  • 'Loading...' text is not visibled.
  • Text is not changed.
  • console log is
    image
@gaearon
Copy link
Collaborator

gaearon commented Apr 25, 2018

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
Copy link
Author

axules commented Apr 27, 2018

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

@gaearon
Copy link
Collaborator

gaearon commented Apr 27, 2018

This is a bug.

@gaearon
Copy link
Collaborator

gaearon commented Apr 28, 2018

#12708 should fix this.

@gaearon
Copy link
Collaborator

gaearon commented Apr 28, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants