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.

[github-actions]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!