Skip to content

Strange beahvior React + new Context API #12686

Closed
@axules

Description

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions