Textures from useTexture don’t receive options applied in useEffect

[FarazzShaikh]

• three version: 0.140.2
• @react-three/fiber version: 8.0.7
• @react-three/drei version: 9.7.1
• node version:
• npm (or yarn) version:

Problem description:

Textures from useTexture don’t receive the repeat property when it’s set in a useEffect. It does work when set in a useLayoutEffect.

This is probably due to the internal useEffect here

drei/src/core/useTexture.tsx

Line 16 in 6964043

useEffect(() => {

overriding the setting.

Relevant code:

• Broken R3F Snadbox.
• intended behavior in a Vanilla sandbox

Suggested solution:

Not sure, maybe to change the internal useEffect to a useLayoutEffect

[github-actions]

🎉 This issue has been resolved in version 9.8.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[drcmda]

i bumped into this today @FarazzShaikh i think we should revert. this isn't about useEffect, but just threejs not being able to set certain properties without needsUpdate, which isn't a bug but expected behaviour as useEffect runs after render. i think we shouldn't mask that with lifecycles.

the onload imo leads to bad coding practices and i'm sure pretty much all loaders have cases like that, everything that's setting buffers or shader defines must have needsUpdate in three if it runs after the object has been rendered out once.

✅ this works (this is how you'd do it in vanilla, too, when the object has been rendered already)

  useEffect(() => {
    tex.wrapS = tex.wrapT = RepeatWrapping
    tex.repeat.setScalar(2)
    tex.needsUpdate = true
  }, [tex])

✅ this works (this runs before render, so no need to needsUpdate)

  useLayoutEffect(() => {
    tex.wrapS = tex.wrapT = RepeatWrapping
    tex.repeat.setScalar(2)
  }, [tex])

✅ this works

const text = useTexture(url)
tex.wrapS = tex.wrapT = RepeatWrapping
tex.repeat.setScalar(2)

✅ this works

const text = useTexture(url)
useMemo(() => {
  tex.wrapS = tex.wrapT = RepeatWrapping
  tex.repeat.setScalar(2)
}, [url])

[FarazzShaikh]

Huh yeah, useLayoutEffect would be the right place to put the code. I was just unaware of the use of that hook at the time.

We can revert this, I don’t see many people using this anyway