React-spring useTransition behaves wrongly

[secretlifeof]

I have a Preact/Nextjs app when a thumbnail is clicked a fixed element slides on top. React-spring is used for animating the slide-up. The first time the transition works smoothly. The second time there is a small delay and the top component is visible without transition. It is even misplaced from the top, that it normally is not.

The transition works without problems in React.

The Relevant code is:

import { useTransition } from 'react-spring'

const projectDetailVisibility = useMappedState(mapState)

const transitions = useTransition(projectDetailVisibility, null, {
    from: { display: 'none', transform: 'translate3d(0, 100vh, 0)' },
    enter: { display: 'initial', transform: 'translate3d(0, 0vh, 0)' },
    leave: { display: 'none', transform: 'translate3d(0, 0vh, 0)' }
})

return (
    <Main>
        {transitions.map(({ item, key, props }) => item && <IndexDetail key={key} styleProps={props} />)}
        <IndexList title={title} filterCategory={filterCategory} match={match} />
    </Main>
)

Does Anybody have experience with using useTransition from react-spring with Preact? Does this problem come from "Next-level conditional rendering"? Does Preact has different mount/unmount behaviour than React, that can cause this?

Versions: next": "^9.0.3-canary.2" "preact": "^10.0.0-rc.0" "react-spring": "^9.0.0-beta.9" (I have tried stable 8 versions without change in behaviour)

[JoviDeCroock]

Hey, if it's not too much trouble could you give a reproducible example. The causes I can think of from the top of my head are quite wide and I have no experience with react-spring.

[secretlifeof]

Hei. Yes I will try to make one. The simplest one I tried to make now, did not have the bug. I will try to make a reproducible one with redux, GraphQL and images.

[secretlifeof]

So I finally managed to reproduce the unexpected behaviour. There are 3 pages (index, complex, indexlist) with increasing complexity. Only indexlist shows what I mean. With indexlist you need to push the button repeated times for something to happen. If next.config.js is changed to React everything seems to work without problems, also with my app.

https://github.com/secretlifeof/preact-usetransition-demo

Thanks for your help!

[JoviDeCroock]

I'll try to take a look at it as soon as possible, thanks for the reproduction.

[developit]

Looks like this is a timing interaction between useEffect()/useLayoutEffect() and Preact's state debouncing. Setting options.debounceRendering=f=>f() to bypass state debouncing seems to fix the issue. What I'm not sure of, is why this only affects the more complex page.

[secretlifeof]

Thank you also for your answer! Can I contribute some how? Is there a possibility to set the options within my nextjs/preact app?