I am building a simulator. Which consists of a three.js canvas animation, and UI elements that display statistics, such as movement speed, height etc.
The user can start/stop the simulator, and roll it back in time.
The UI elements show stats based on the local time of the simulator and a dataset that does not change during runtime.
In the official documentation of three-fiber it says that we should not do setState inside useFrame.
The UI elements need to update around 10 FPS. The animation is it self running at 60 fps.
How can I efficiently trigger other UI elements to rerender and keep them in sync?
I think the notion with setState in useFrame is if it occurs on every frame. However, you’re only thinking about doing it 10fps which is slightly slower. I don’t think it’ll be too big of an issue. You can probably mix this with a shareable context or store that causes a force render which would ultimately cause children components using the shared state to render.
If you do see a performance hit then that’s when you may want to consider changing the UI to not be based on state but changed manually through useRef’s.
Well, that’s quite a drawback and should probably be looked into quite imminently, with the thought of using socket.io in a game environment I guess this situation could be partially handled by updating state based on any individual players actions but of course most of those actions would already be determined by a constant frame rate… it sounds like a problem…