[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} />