async atoms and error when using suspense

[joprice]

I'm using zedux in a react native app and have been seeing the error for a few months. Can't perform a React state update on a component that hasn't mounted yet. It happens when I use suspense as a parent of an async data-only atom. I've dug for a while on multiple occasions to see if it's something I'm doing wrong, but can't find any unmanaged effects or other misuse. Could there be any way that the suspense handling of zedux is triggering a state update during rendering, as the warning states?

[bowheart]

I've never seen this "hasn't mounted yet" version of this error. My initial thought is it doesn't make sense since you can set state during initial render in React - before the component mounts - just fine:

function Repro() {
  const [state, setState] = useState('a')

  if (state === 'a') setState('b') // works
}

So this needs some digging.

Some Digging

It looks like this is a simple race condition with suspense. Turns out it's very easy to repro:

let counter = 0

function Repro() {
  const [state, setState] = useState('a')

  if (counter++ === 0) {
    throw Promise.resolve().then(() => setState('b'))
  }

  return <div>Repro state: {state}</div>
}

Since the component is essentially "unmounted" immediately when it suspends, any setState calls that happen before the component remounts on promise resolve will trigger this error. In this example, this .then will run before any .thens React can chain off of it.

Alternative repro:

let counter = 0

function Repro() {
  const [state, setState] = useState('a')

  if (counter++ === 0) {
    setTimeout(() => setState('b'), 5)

    throw new Promise(resolve => setTimeout(() => resolve(null), 10))
  }

  return <div>Repro state: {state}</div>
}

I also found this TanStack Table issue: TanStack/table#5026. Though they all seem to be saying it's a StrictMode-only thing. I can't repro with StrictMode alone without suspense.

Some Plot Thickening

So now you'd think reproing this with Zedux hooks would be easy. But there are two problems:

1. useEffect never runs until the component's initial suspending promise resolves
2. After the initial suspense, the component stays mounted - resuspending it won't trigger this error.

Zedux hooks waits until their useEffects run before setting a mounted flag. That flag prevents Zedux from ever updating React state until the component is ready. I believe this is the case in any builds of Zedux v1 or v2 you might be using. As far as I can tell, this should be specifically preventing this React error in all possible cases.

I don't think any behavior around this error would be different with React Native. StrictMode doesn't seem to change anything either. So I'm stuck here.

I can spend some more time on it tomorrow. What version of React and Zedux are you using @joprice?

[joprice]

Thanks for the deep dive. I’ll put a repro together to make sure I can reproduce in isolation before you burn too much more time on it. I thought it might be something you had seen before. I’m using the latest 1.x zedux and latest react native. I also don’t suspect any RN specific behavior but mentioned it just in case it could be relevant.