fix: memoize result of useTexture

[roelkok]

Why

When passing the same values to useTexture, I would expect the same return value. However, when passing an object as the input parameter, a different object is returned each time even when the same input object is used.

Example:

const urlMap = useMemo(() => {
  return {
    textureA: urlA,
    textureB: urlB
  }
}, [urlA, urlB])

const textureMap = useTexture(urlMap);

useEffect(() => {
  // This will run every render. Even if urlA and urlB (and therefore urlMap) haven't changed.
}, [textureMap])

What

To give a more expected result, memoize the return value when dealing with an object as input.

Checklist

• Ready to be merged

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
drei	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 9, 2024 4:38pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[drcmda]

hmm, this is bad, i forgot that giving it an object wouldn't yield a consistent cache key. all useLoader hooks are supposed to be cached, not memoized, meaning two distinct components giving it the same object are supposed to yield the same output.

to memoize would fix it per component but it would still yield multiple results for multiple components, which isn't correct. i think im going to still merge to at least stop it from memory leaking.

[github-actions]

🎉 This PR is included in version 9.102.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀