react-spring

react-spring copied to clipboard

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.7.3

What's Wrong?

When using <StrictMode> in React 18, the event handlers (onStart, onRest...) don't get called.

To Reproduce

In the linked StackBlitz project, you can see in the Console that only the console.logs in the useEffect hook get executed. The event listeners never get called. If you disable StrictMode in index.tsx, the event listeners get called as expected.

Expected Behaviour

Event listeners get called in StrictMode.

Link to repo

https://stackblitz.com/edit/stackblitz-starters-jphu4a?devToolsHeight=33&file=src%2FApp.tsx

I second this, in my case, most of the hooks also exhibit this weird behavior such as useChain not triggering when components mount and events like onChange not firing in almost every hook. All of this occurs when reactStrictMode is set to true. It seems like strict mode has broken most of the functionality.

Same behavior with last version 9.7.3 in my next js project. In my case animation does not work with this code also

    const [style] = useSpring(
        () => ({
            from: { opacity: 0 },
            to: { opacity: 1 },
            delay: 100,
            config: {
                duration: 700,
            },
        }),
        [waitInViewport, inView]
    );

    return (
        <animated.div className={`fade-wrapper ${className}`} style={style} ref={observe}>
            {children}
        </animated.div>
    );