useSpring returns undefined in concurrent mode with Suspense

[arackaf]

🐛 Bug Report

useSpring returns undefined sometimes.

To Reproduce

Steps to reproduce the behavior:

Something as simple as this:

const styles = useSpring({
    config: { ...config.slow },
    from: { opacity: 0 },
    to: {
      opacity: 1
    }
  }) as any;

first returns what it should, and then returns undefined.

I'm seeing this pretty consistently. I think it's because of Suspense. My component is in fact suspending, and I think this may be a consequence of React doing its rendering off to the side, in memory. That's just a hunch though so please don't take it too seriously.

Expected behavior

No undefined returned.

Link to repro (highly encouraged)

Sorry don't have one but I could probably put one together if needed.

Environment

• react-spring v9 rc3
• react v0.0.0-experimental-33c3af284

[zachintosh]

@arackaf Have you had any luck with this? I'm running into exactly this issue.

[aleclarson]

I'll take a look at this soon if you provide a sandbox that reproduces it. 👍

[arackaf]

I'm swamped but I'll try to find some time. If someone is hot for this to be fixed (easily worked around - just tack a || {} after the useSpring call) it should be easy to repro. Just a simple hook like what's above, but running with React's concurrent mode switched on.

[zachintosh]

In the situation we're in, we don't have concurrent mode enabled (no suspense or lazy loading). We are on version rc.3 as well. We are seeing the same thing, though.

[arackaf]

Ohhh - the plot thickens! Fire up a Sandbox then :D

[arackaf]

@zachintosh to be clear, you're not using unstable_createRoot anywhere in your app? You're just doing

import { render } from "react-dom"

and using it to render your app? Concurrent mode is technically separate from Suspense or data fetching.

[zachintosh]

Yes, we're not using the experimental concurrent mode. Our app does use the currently available Suspense, but not for data fetching, just lazy loading. In the setup where we're experiencing the bug, we are not using that either, though.

I'm tryna get the sandbox up and going, but not having luck recreating it. 😓

[arackaf]

Very strange - for me, this bug disappeared as soon as I switched off concurrent mode. I'd recommend using CM to repro - whatever this bug is, it seems to happen with CM more easily.

[zachintosh]

So it turns out it was a bad state bit in our code that was breaking it (easy to fix, fortunately). Here is a repo showing how to break it (you might have to refresh the live demo part to get it to log):

https://codesandbox.io/s/elastic-sky-xthi0?file=/src/App.js

It's caused by a bad pattern in our code, so it's not necessarily react-spring's issue, but I don't understand why it causes react-spring to return undefined.

So, not necessarily your issue @arackaf ... but hopefully your issue has an easy solution too.

[joshuaellis]

closing due to inactivity. please use discussions or discord if you want more help or please consider creating a PR if you want to add a feature 😄