useTexture(..., onLoad) callback fires incorrectly

[jwueller]

• three version: 0.164.1
• @react-three/fiber version: 8.16.6
• @react-three/drei version: 9.105.6
• node version: v22.2.0
• npm (or yarn) version: 1.22.22

Problem description:

The onLoad callback fires every render if the callback isn't memoized, because useEffect hook depends on the function instead of the mapped texture data. On the other hand, if the callback is memoized, it will only fire once and then never again, even if the data finishes loading later.

Relevant code:

const texture = useTexture(
    'some_texture.jpg',
    () => console.log('every render'),
);

Caused by this code in useTexture:

useLayoutEffect(() => {
  onLoad?.(mappedTextures)
}, [onLoad])

Suggested solution:

useLayoutEffect(() => {
  onLoad?.(mappedTextures)
}, [mappedTextures])

I will provide a PR with this change.

[clementroche]

Great job! I was experiencing the same actually.