Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug]: Event Handlers not getting called in StrictMode #2203

Open
1 of 5 tasks
helgenlechner opened this issue Sep 22, 2023 · 2 comments
Open
1 of 5 tasks

[bug]: Event Handlers not getting called in StrictMode #2203

helgenlechner opened this issue Sep 22, 2023 · 2 comments
Labels
template: bug This issue might be a bug

Comments

@helgenlechner
Copy link

Which react-spring target are you using?

  • @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

@helgenlechner helgenlechner added the template: bug This issue might be a bug label Sep 22, 2023
@tfarhan00
Copy link

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.

@multivoltage
Copy link

multivoltage commented Apr 29, 2024

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>
    );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
template: bug This issue might be a bug
Projects
None yet
Development

No branches or pull requests

3 participants