[bug]: useSpring Events not firing (Next.js 13)

[lairdkruger]

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.2

What's Wrong?

API events are not triggering at all.

To Reproduce

Setup a Next.js 13.3.0 project, try useSpring with events. Try to do something in the event eg:
const [{ x }, api] = useSpring( () => ({ x: 0, // onChange is currently broken with Next App structure onChange: { x: () => { console.log("onChange"); // This should be logging the value on drag }, }, }), [] );

Expected Behaviour

Expected console to log "onChange".

Link to repo

https://codesandbox.io/p/sandbox/dawn-leaf-lqof4b?selection=%5B%7B%22endColumn%22%3A11%2C%22endLineNumber%22%3A12%2C%22startColumn%22%3A11%2C%22startLineNumber%22%3A12%7D%5D&file=%2Fpages%2Fworking%2Findex.tsx

[bramarcade]

I'm also encountering this bug, with @react-spring/web@9.6.1 and next@13.4.1, using the app router as in the above repo. The springs work (they might not be recognizing config, I'm very inexperienced with the library and can't tell). Events like onStart do not fire.

[ionutpopa]

Yup, onStart, onRest do not work, as well as things like api.start or api.stop. I am using Next 13.4.19, and react-spring 9.7.2

[skibitskiy]

I found that something happens with the React life-cycle within useSprings. There is useIsomorphicLayoutEffect, that should run with updates array, that consist of config, callback and other props. Updates is simple array variable (not react ref) and it rewrites on every render, but it calculates in useMemo on first render. So, I debugged on some examples on react-spring site and found that useIsomorphicLayoutEffect should be called with not empty updates array, but in Next.JS 13 effect calls with empty array

[skibitskiy]

I made hack to fix it in Next. You can edit sources of useSprings. Instead of const updates = [] here write this code:

const updatesRef = useRef([])
const { current: updates } = updatesRef;

@ionutpopa fyi

[skibitskiy]

Also I noted that app renders twice and it causes current problem. There is the easier way to make react-spring work – turn off the React strict mode (for React 18)

https://stackoverflow.com/questions/71847778/why-my-nextjs-component-is-rendering-twice

const nextConfig = {
  reactStrictMode: false
}

module.exports = nextConfig

[fortydegrees]

@skibitskiy just want to say a big thank you for finding the fix. spent about a day trying to debug myself and work out what was wrong. setting reactStrictMode: false worked a treat!

I'm guess it's a big with nextJS rather than react-spring

[WestonVincze]

@skibitskiy huge thanks from me as well. I upgraded my app to Next14 and have been turning my wheels trying to figure out what change broke my animations.

[tovimx]

This also helped me with animations using useTrail not getting trigger at first render.

[JavanFriedel]

I am also experiencing this bug during development.

I am using Spring to animate bars in a graph, on entry and on data change. However, because of React Strict mode, it is rendering twice in quick succession which is causing the bars to get stuck on their inital "to" configuration, and fail to animate to their provided "from" config in the UseSpring hook.

Turning off strict mode does fix the problem, but unfortunatly will turn off strict mode app wide, which can be a useful feature to keep. It goes without saying, that this does not effect production outputs then.

[willydavid1]

I was migrating an app that used pages to app directory (Nextjs v14) and all the animations with react-spring stopped working.

When I changed reactStrictMode to false, all the animations started working again magically. Thanks @skibitskiy , you saved the day 🚀

[yymm120]

@skibitskiy 谢谢！

[slicktdog08]

Also I noted that app renders twice and it causes current problem. There is the easier way to make react-spring work – turn off the React strict mode (for React 18)

https://stackoverflow.com/questions/71847778/why-my-nextjs-component-is-rendering-twice

const nextConfig = {
  reactStrictMode: false
}

module.exports = nextConfig

Saved me a nightmare. Much thx