memory leak when meshes update

[slahser1992]

👋 hi

I want to use react-three-fiber to draw something like this:

elements.map(element =>
<mesh material={elementMaterial}>
<shapeBufferGeometry>
</mesh>
)

when count of elements update, there will generate all new element again and can't dispose old geometry, I try to use useEffect to solve this problem but not work like this:

const map = () => { useEffect(() => { return function ref.current.geometry.dispose() }, []); }

[drcmda]

it's missing a key. react won't unmount (and therefore dispose) it because it thinks you're just updating props.

elements.map(element =>
  <mesh key={element.uuid} material={element.material}>
    <geometry />
)

[slahser1992]

it's missing a key. react won't unmount (and therefore dispose) it because it thinks you're just updating props.

elements.map(element =>
  <mesh key={element.uuid} material={element.material}>
    <geometry />
)

thanks for your reply and kind remind me, I forget this in my example.
but my code is:

const Section = ({ polygon, material, lanemarkers, id }) => {
	const ref = useRef();
	return (
		<group>
			<mesh
				visible
				material={material}
			>
				<shapeBufferGeometry
					ref={ref}
					attach={"geometry"}
					args={[new THREE.Shape(PointsToVector3Array(polygon.points))]}
				/>
					<mesh position={[0, 0, 1]}>
						{
							lanemarkers.map(lanemarker => {
								const linePoints = PointsToVector3Array(lanemarker.curve.points);
								return (
									<FatLine key={lanemarker.id} curve={linePoints}/>
								);
							})
						}
					</mesh>
			</mesh>
		</group>
	);
};

const HDMap = observer(() => {
	const { hdmapStore } = useStores();
	const sections = [];
	hdmapStore.sections.forEach((section) => {
		sections.push(section);
	});

	const [ref, material] = useResource();
	return (
		<>
			<meshBasicMaterial ref={ref} color={mapColor}/>
			{
				sections.map((section) =>
					<Section
						polygon={section.polygon}
						key={section.id}
						id={section.id}
						material={material}
						lanemarkers={section.lanemarkers}
					/>
				)}
			}
		</>
	);
});

this problem is not solved.

[drcmda]

could you put this down into a codesandbox? a very reduced example that i can test

PS. this is an automatic mem-leak as well:

args={[new THREE.Shape(PointsToVector3Array(polygon.points))]}

means it's recreating buffer geom on every render.

const points = useMemo(() => new THREE.Shape(PointsToVector3Array(polygon.points)), [])
...
args={[points]}

[slahser1992]

could you put this down into a codesandbox? a very reduced example that i can test

PS. this is an automatic mem-leak as well:

args={[new THREE.Shape(PointsToVector3Array(polygon.points))]}

means it's recreating buffer geom on every render.

const points = useMemo(() => new THREE.Shape(PointsToVector3Array(polygon.points)), [])
...
args={[points]}

thanks you very much, I realize the meaning of yours. but the problem still exists when I try this. so I guess the problem root is the dev-tool.so I replace react-three-fiber to three in my project, everything is ok.