matthewp / haunted

React's Hooks API implemented for web components 👻

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Skipped effects in nested components

cristinecula opened this issue · comments

We at @Neovici have been using haunted for a couple of months now and we keep running into a very elusive bug, where sometimes effects are skipped, even if the dependencies have changed. Yesterday I was able to isolate the issue and I have managed to consistently reproduce the bug.

You can find an example and explanation here: https://webcomponents.dev/edit/wTQZEc7FjFC68GZ6ERUf

The bug is caused by the parent component queuing a second UPDATE in the child component DURING the COMMIT phase. The second UPDATE will be handled before the EFFECT phase for the first update. This causes the effect update to be ran twice, thus updating the internal state (lastValues, values) twice with the same data. When the EFFECT phase is handled lastValues will be equal to values, thus skipping running the effect.

I have created a test case for it and a proposed solution, which I will send as a PR soon.