Where should imperative creation like `new Mesh()` be done?

Consider this component:

const Thing = () => {
  const skinnedMesh = new THREE.SkinnedMesh(geometry, material);
  return <primitive object={skinnedMesh} />;
};

Every time this component renders, a new SkinnedMesh will be created (and I’m not sure if it will be cleaned up?).

What’s the “right way” to minimize extra mesh creation here?

Should it be in in an effect?

const Thing = () => {
  const ref = useRef();
  useEffect(() => {
    const skinnedMesh = new THREE.SkinnedMesh(geometry, material);
    ref.current.add(skinnedMesh);
  }, []);
  return <primitive ref={ref} />;
};

I think this will cause one frame of a blank primitive?

So should it be in in a useLayoutEffect() to insert before the scene renders? (Will that even work with r3f?)

const Thing = () => {
  const ref = useRef();
  useLayoutEffect(() => {
    const skinnedMesh = new THREE.SkinnedMesh(geometry, material);
    ref.current.add(skinnedMesh);
  }, []);
  return <primitive ref={ref} />;
};

Or should the Mesh itself be memoized? And any side effects done in the useMemo callback too, like adding more children to the mesh?

const Thing = () => {
  const skinnedMesh = useMemo(() => new THREE.SkinnedMesh(geometry, material), []);
  return <primitive object={skinnedMesh} />;
};

Or something else?

[drcmda]

yes, memoize it or put it into state. the render function shouldn’t have any side effects. useEffect happens after the component renders, so that wouldn’t be the best solution to your problem like you said.

if it never changes i would do this:

const [mesh] = useState(() => new THREE.SkinnedMesh(geometry, material))

if it can change i would do

const mesh = useMemo(() => new THREE.SkinnedMesh(geometry, material), [geometry])

[AndrewRayCode]

Ok, right now I’m trying this, for anyone spelunking and finds this thread. This is an (incomplete) example to implement shader-particle-engine in r3f which requires instantiating two classes at render time and adding one to the other, and disposing on unmount

const ParticleEmitter = () => {
  const speEmitter = useMemo(
    () => new SPE.Emitter({ options }),
    [] // eslint-disable-line react-hooks/exhaustive-deps
  ); 

  const speGroup = useMemo(() => {
    const group = new SPE.Group({ ...options });
    group.addEmitter(speEmitter);
    return group;
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => () => speGroup.dispose());

  return <primitive object={speGroup.mesh} />;
}