How to stop runRenderLoop in useEffect which is running continuously!

Questions
, , , ,
1

I had written runRenderLoop in useEffect which is running continuously.

Screenshot 2023-01-17 154531
Screenshot 2023-01-17 154531363×868 47.8 KB

@brianzinn @mawa @carolhmj Thank you

2

There’s stopRenderLoop Engine | Babylon.js Documentation (babylonjs.com)

2 Likes
3

Do you think the code which was written is correct or should I remove render loop from useEffect. And where exactly I should place the stopRenderLoop .

4

I don’t think you even need the runRenderLoop, the Scene component should take care of this right @brianzinn ?

1 Like
5

with useEffect you need to return what will be called when the scene changes with run loops, observables, etc., which is stopRenderLoop being mindful the optional property. runRenderLoop is a misnomer to me as it just pushes something else to run in addition to currently render loops.

Here is a good way to stop render loop:
react-babylonjs/RenderOnDemand at master · brianzinn/react-babylonjs (github.com)

The Engine already supports manually pausing rendering (including an automatic opt-in prop to stop rendering when canvas is not visible):
https://brianzinn.github.io/react-babylonjs/examples/basic/pause-renderer

You don’t want to hide the loading UI and resize in your render loop as per your screenshot. What might work for you is this:

useEffect(() => {
  const renderLoop = engine.runRenderLoop(() => {
  // your code to run here
 })
 // this will be called when your scene changes
 return (() => {
   engine.stopRenderLoop(renderLoop);
 );
}, [scene])
2 Likes