[QUESTION] Why does a state change cause the render loop to fail even when the state isn't used by Canvas?

[varshithmee]

Hi,

I followed the tutorial from this incredible blog and added my TypeScript tweaks to it.

It works perfectly on its own.

The issue starts when I add state to the other parts of the app. For example, using a simple useMouse hook in the parent component causes the render loop to fail if I move the mouse. Even Zustand state change causes the render loop to fail.

Below example shows zustand state changing when mouse hover the text.

20250521-1022-21.6067807.mp4

My immediate solution was to memoise the scene component, and it works, but I do not understand why it causes the render loop to fail in the first place.

[CodyJasonBennett]

Are you sure the render loop itself is failing? This sounds like you are creating a stale closure somehow.

Note that uniforms must be memoized or you may override them with an unreferenced object:

const uniforms = useMemo(() => ({ uTime: { value: 0 } })

useFrame((state, delta) => {
  uniforms.uTime.value += delta
})

<shaderMaterial uniforms={uniforms} />

[varshithmee]

const uniforms = useMemo(
		() => ({
			uPositions: {
				value: null,
			},
			uColor: {
				value: new THREE.Color(color),
			},
		}),
		[color],
	);

useFrame((state) => {
		const { gl, clock } = state;

		gl.setRenderTarget(renderTarget);
		gl.clear();
		gl.render(scene, camera);
		gl.setRenderTarget(null);

		points.current.material.uniforms.uPositions.value = renderTarget.texture;

		simulationMaterialRef.current.uniforms.uTime.value = clock.elapsedTime;
	});