Single source of truth

[guillaumebrunerie]

I'm trying to understand react-three-fiber (coming from a React/Redux background), but I really don’t get the "avoid setState in loops" advice. To me setState (or similar) is the whole reason why I want to use React to begin with, it gives a single source of truth and makes sure that everything stays in sync.

Let’s take a concrete example. Let’s say I want to implement a 3D game when we are chasing some enemy which is itself moving. The enemy will be represented as a 3D model in the main view, but maybe there is also a minimap in the corner showing a view from the top and a dot for the enemy, maybe there is also an on-screen arrow showing in which direction we are supposed to go, maybe there is a counter somewhere showing the current distance to the enemy, and so on.

In a React/Redux app, this would be implemented very simply by having the position of the enemy in a useState/the store, every component that needs it would use it, and when the enemy moves it would simply setState and everything would update as expected. How would you implement that in react-three-fiber? Do you need to keep track by hand of everything that needs which pieces of state and make sure to mutate all of them every time it is needed? I guess you can’t even pass props/context to child components if you are bypassing React's rendering mechanism.

I found the following discussion: #1288 where the answer simply says

just like plain react, you would never animate a div across the screen with setState

which I completely disagree with, I would absolutely animate a div across the screen with setState (assuming it cannot be done with CSS). I have been working on a React/Redux app with (literally) thousands of components present at the same time and many things that trigger state changes at every frame, and it works flawlessly.