UseLoader with FBXLoader is triggering a new loader for each component and making the render call only for the last mesh instantiated

[erochOnGit]

Hi Everyone.
I'm on react-three-fiber: ^4.2.21

I'm opening this discussion after successfully instantiating and rendering multiple fbx import.
However before that I faced a weird issue that I think you could face too.

According to 677 The useLoader is behaving like :

const [scene, set] = useState()
useEffect(() => void new FBXLoader().load(url, set), [url])
return model ? <primitive object={scene} /> : null

Creating a new FBXLoader each time it's called.
And should be used like this :

const scene = useLoader(FBXLoader, url)
return <primitive object={scene} />

This definitely worked for me when I tried to display my beautiful ybot.fbx 😝
But when I started instantiating multiple component with this code only the last mesh was rendered.
So i tried to replace the useLoader with the wrapped code, and pass the loader as an argument to keep it instanced only once.
And it worked 🎉 :

const Asset = ({position, url, loader}) => {
  const [fbx, setFbx] = useState();
  useEffect(() => void loader.load(url, setFbx), [url]);
  return fbx? <primitive object={fbx} dispose={null} /> : null;
 }

So now I'm wondering how can we fix this issue cause I like the idea of using only useLoader but I'm not sure of the architecture choices we can make.
Also I never contributed to a project like that.
I can't even look at the source code like i'm used to with three because I really don't see in which files the code I'm looking for is located.
Hope it's help you and maybe you could help me too ^^'

[drcmda]

it's not quite the same, it's better, useloader caches assets. this is great because you can access them from anywhere in the tree, getting the same meshes and materials. but if you want to render them as clones, then clone them. what you are doing above is re-fetching them, re-parsing the gltf, that is all wasted effort for nothing

const { scene: sceneOriginal } = useLoader(..., url)
const scene = useMemo(() => sceneOriginal.clone(true), [sceneOriginal])

this won't have to re-fetch and it doesn't re-parse, it just takes what's already there and creates a deep copy.