Updating reactive outside of event handler causes state changes to propagate in wrong order
See original GitHub issueIntended outcome: Child should not see updated state change before parent similar to how React.useContext works
Actual outcome: Child sees updated state before parent component and multiple renders are triggered even if only single reactive var is being changed.
How to reproduce the issue: https://codesandbox.io/s/quirky-williamson-v5d0r?file=/src/App.js
- [CORRECT BEHAVIOR] Click on any of following buttons. You will notice in logs that new state is always visible to parent component and then in child component
root -> (parent-reactive | parent-context) -> (child-reactive | child-context)
Update React Context
(this uses react context and works fine)Update React Context Async
(this uses react context and works fine)- instead of updating context within handler this has setTimeout to simulate update outside of event handler
Update Reactive
(this updates reactive variable within context of event handler and works fine)
- [INCORRECT BEHAVIOR] Now click on
Update Reactive Async
- instead of updating context within handler this has setTimeout to simulate update outside of event handler
- With this, child component see state change even before parent. State seem to transition like
(child-reactive | child-context) -> (parent-reactive | parent-context) -> (child-reactive | child-context) -> root -> (parent-reactive | parent-context) -> (child-reactive | child-context)
- I can confirm that if I wrap it with react dom unstable api for batching updates, it works as expected but I assume that it should have worked without it.
- It leads to crashes where parent conditionally renders child based on state if child gets
null
in updated state before parent does. Here is sandbox to reflect just such scenario https://codesandbox.io/s/naughty-almeida-mow3i?file=/src/App.js
Versions
- @apollo/client: 3.3.15
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:5 (2 by maintainers)
Top Results From Across the Web
javascript - lit-html: issue w/ using change event to propagate ...
Since panel is not specified as a reactive property, changing that will not automatically re-render the component. Perhaps you want to make ...
Read more >Event Bubbling and Event Catching in JavaScript and React
I created this resource to help you understand event propagation and how it works in JavaScript and React in a clear and comprehensible...
Read more >Introduction to events - Learn web development | MDN
Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can...
Read more >re-frame 2022-06-13 | Slack Archive
what different it makes whether the context is reactive. ... the ordering by re-frame, individual recomputations may "see" obsolete state not yet updated....
Read more >How to understand reactivity in R - R Shiny - RStudio
Reactivity is what makes your Shiny apps responsive. It lets the app instantly update itself whenever the user makes a change.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Checking for updates here.
@jcreighton Updated issue description and added another simplied sandbox to show real implication of it