question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Updating reactive outside of event handler causes state changes to propagate in wrong order

See original GitHub issue

Intended 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

  1. [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)
    1. Update React Context (this uses react context and works fine)
    2. 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
    3. Update Reactive (this updates reactive variable within context of event handler and works fine)
  2. [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

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
dejavoodooocommented, Aug 13, 2021

Checking for updates here.

1reaction
talha5389commented, Apr 22, 2021

@jcreighton Updated issue description and added another simplied sandbox to show real implication of it

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found