useLayoutEffect teardown runs after new elements are mounted

After moving to Preact X and using hooks I started noticing something weird happening with the useLayoutEffect hook that I was using to store the scroll position when exiting a route.

What I found is that when the teardown function of the hook runs the DOM contains both the old and the new children at the same time (hence my scroll position was being read wrongly).

Here’s an example: https://codesandbox.io/s/zealous-snyder-37ync

When clicking next the component should change the visible component and there’s a console.log of the DOM when the hook runs. You can see that when running the teardown function both the old and the new children are mounted in the DOM.

I’m not sure if this intended behaviour and I’m just using the hook wrong of if it’s working as intended.

EDIT: for reference here is the same thing in react where the problem doesn’t show up. https://codesandbox.io/embed/nostalgic-taussig-m09gx

[andrewiggins]

Thanks for trying it out! I looked it at and, yes, it seems your bug is a new case I hadn’t considered. @JoviDeCroock created a UT for us based on your bug and I added it to my PR so we can play with it. We may check in #2012 as is to fix other issues but we’ll definitely add this as a test case for us to work on in the meantime.

[d3x7r0]

Ok I managed to get it working here and I have bad news: the behavior seems to be the same. When clicking the button the code still sees both the old and new elements at the same time on the dom. 😔