shouldRecycle=false breaks UI when scrolling the elements fast.

[ahamedalthaf]

'shouldRecycle: false' is breaking the UI when we try to scroll faster. This breaks the UI and completely block the user from doing any activity.

Version: "@html-next/vertical-collection": "1.0.0-beta.12"

Please find the error below in the browser console.

Assertion Failed: value must non-negative

[RobbieTheWagner]

@ahamedalthaf can you try the latest version please?

[ahamedalthaf]

@rwwagner90 tried with latest version and still seeing the same issue.

[NullVoxPopuli]

I'm experiencing this on emberclear, too :(

I enabled shouldRecycle='false' because without it the item's did-insert modifier/hook isn't reused... which is problematic 🤷‍♂️

[ahamedalthaf]

@rwwagner90 I have fixed this issue in the PR raised. Please check from your side.

[RobbieTheWagner]

Thanks @ahamedalthaf!

[knownasilya]

Was seeing nextSibling of undefined in the glimmer vm with this flag as well.

[jbottigliero]

While the referenced PR has been merged for some time (looks like it would have landed in 3.0.0), I'm encountering a similar error in newer versions.

I've tested in both 4.0.1 and 3.1.0, both versions result in a similar error, the below report is from 4.0.1 (latest at time of writing):

Uncaught Error: Assertion Failed: value must non-negative
    at Object.assert (index.js:181:1)
    at SkipList.set (-private.js:1486:1)
    at DynamicRadar._measure (-private.js:1762:1)
    at DynamicRadar._updateIndexes (-private.js:1656:1)
    at DynamicRadar.update (-private.js:782:1)
    at -private.js:769:1
    at Array.execJob (index.js:36:1)
    at Scheduler.flush (index.js:96:1)
    at index.js:82:1

I'll try and follow-up with more details as I begin to investigate...

[wozny1989]

Anyone got an idea how to fix this? We have the same reason as @NullVoxPopuli to use shouldRecycle={{false}}

[NullVoxPopuli]

since I posted my comment, I've found that using derived data for everything solves most problems.

did-insert/did-update/will-destroy are problematic for more than just this scenario, but also outside of Ember. useEffect in React suffers from the same problem, as do other effect implementations in other frameworks, such as Preact, Solid, etc.

By using derived data, you appropriately get the correct behavior when you need it (when the root state changes, which is what happens during component re-use)