How to clean ressources ? about suspend-react

[vezaynk]

I too am wondering about this. I asked on Stackoverflow.

[abernier]

you have clear, eg: https://github.com/pmndrs/drei/blob/4aa04c93e4e86711f0a5a6777482a92d52988253/src/core/FaceControls.tsx#L350

[vezaynk]

@abernier so is the answer "use an effect"?

[abernier]

that's how I did yes -- that way if a dep changes (same as your suspend, in my case videoTextureSrc), it will be cleaned up and cleared

[vezaynk]

@abernier That's not ideal because it de-couples the effect from it's clean-up.

Suspend-react is aware of when the dependencies change, and so is best-positioned to run clean-up effects at the right time.

[abernier]

I thought like you primarily, I even asked about that on Discord

From @drcmda's answer, I guess this decoupling is intentional:

suspense is a cache, unmount means nothing to a cached entry, it will continue to be available

which makes sense to me, it's a cache, nothing more

If you want more, like a side-effect when your cache-key changes, then you have useEffect

[vezaynk]

I see.

Sounds like we should be wrapping suspend in our own hook.

Something like this.

const useSuspense(cb, deps) {
  const { value, cleanup } = suspend(cb)

  useEffect(() => {
    () => cleanup()
  }, deps)

 return value;
}

...but then we get the pitfall from a lack of reference-counting if two components use the same suspended keys.

useEffect(() => {
    () => {
      if (lastRef) evictFromCache();
      cleanup()
   }
  }, deps)

Makes me think suspend-react should be providing this.