How to stop runRenderLoop in useEffect which is running continuously!

I had written runRenderLoop in useEffect which is running continuously.

@brianzinn @mawa @carolhmj Thank you

There’s stopRenderLoop Engine | Babylon.js Documentation (

1 Like

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 .

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

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 (

The Engine already supports manually pausing rendering (including an automatic opt-in prop to stop rendering when canvas is not visible):

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 (() => {
}, [scene])