Fiber texture load fails with error: A component suspended while responding to synchronous input

Question

I'm trying to load a texture using textureloader:

const texture = useLoader(TextureLoader, '/textures/texture.png')

react gives me an error:

ERROR A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

My dependencies:

  "dependencies": {
    "@react-three/drei": "^9.58.4",
    "@react-three/fiber": "^8.12.0",
    "@react-three/postprocessing": "^2.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "three": "^0.150.1"
  },

importing a texture using drei(useTexture) gives the same error.

thanks for the help!

Answer 1

Had the same problem. Solved by wrapping the component that calls useLoader() in <Suspense> component, like this:

import { Suspense } from 'react';

<Suspense fallback={<div>Wait...</div>}>
   <MyComponentThatCallsUseLoader/>
</Suspense>

While the textures are loading, the fallback component is rendered instead of the children of <Suspense>.