Bug: useAssets might attempt state updates before mounting

[RJWadley]

Current Behavior

if the render is suspended after useAssets is called but before the image finishes loading, we get an error:

Expected Behavior

useAssets should not cause errors if rendering is suspended

Steps to Reproduce

the easiest way to reproduce this is to create a component that suspends:

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export function AssetTest() {
  const {
    assets: [texture],
    isSuccess,
  } = useAssets<Texture>([
    "https://fastly.picsum.photos/id/436/4000/4000.jpg?hmac=wzOFg9pak_9vNY9IF9Bz43cwQXdtmOGqXiWS-F9IzpY",
  ]);

  throw sleep(100);
  return null;
}

I've also prepared a codesandbox that throws this error. Note that you'll want to open the preview in a new tab because the codesandbox preview frame causes extra unrelated errors.

Environment

• @pixi/react version: 8.0.0-beta.21
• pixi.js version: 8.6.6
• React version: 19.0.0
• ReactDOM version: 19.0.0
• Browser & Version: Chrome 131.0.6778.265
• OS & Version: Windows 11
• Running Example: https://codesandbox.io/p/devbox/pixi-assets-suspending-tyt7l5

Possible Solution

• the actual setState should probably go into an effect
• in this case it's probably fine to start fetching the asset during the render - just don't update any react state
• if the asset is already cached, it's fine to return it on the first render and skip the effect work later

Additional Information

No response

[thejustinwalsh]

@RJWadley thanks for catching this, I exclusivly have been using useSuspenseAssets with suspense, and never thought to run useAssets through a suspense test...

With React 19 out officially, I think we need to take a pass on simplifying the hooks and leaning on the new use hook. I don't beleive there needs to be a difference between the two hooks anymore.