[bug]: Event Handlers not getting called in StrictMode

[helgenlechner]

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

[tfarhan00]

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]

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

[pilaoda]

react-spring/packages/core/src/hooks/useSprings.ts

Lines 131 to 153 in 3d2523d

	const updates: any[] = []
	// Cache old controllers to dispose in the commit phase.
	const prevLength = usePrev(length) || 0
	// Create new controllers when "length" increases, and destroy
	// the affected controllers when "length" decreases.
	useMemo(() => {
	// Clean up any unused controllers
	each(ctrls.current.slice(length, prevLength), ctrl => {
	detachRefs(ctrl, ref)
	ctrl.stop(true)
	})
	ctrls.current.length = length
	declareUpdates(prevLength, length)
	}, [length])
	// Update existing controllers when "deps" are changed.
	useMemo(() => {
	declareUpdates(0, Math.min(prevLength, length))
	// @ts-expect-error – we want to allow passing undefined to useMemo
	}, deps)

react-spring/packages/core/src/hooks/useSprings.ts

Line 167 in 3d2523d

updates[i] = declareUpdate(update)

I debug deeply and found it probably related to the updates list is empty in strict mode second render function call.
useMemo only called in the first render function and skip in the secord one!
It seems like a anti-pattern to modify render function scope variable in useMemo. Such variable should be wrapped in useRef I guess.
Hope this infomation help. @joshuaellis