[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.

https://github.com/user-attachments/assets/b9ae1774-d1d4-4602-8441-36317d29dfc3

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.