fix: ref to https://epicreact.dev/why-you-shouldnt-put-refs-in-a-depe…

…ndency-array/
brianzinn · Dec 11, 2022 · 83aa182 · 83aa182
1 parent da4943c
commit 83aa182
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/packages/react-babylonjs/src/Engine.tsx b/packages/react-babylonjs/src/Engine.tsx
@@ -92,6 +92,7 @@ const ReactBabylonjsEngine: React.FC<EngineProps> = (props: EngineProps, context
   const onEndRenderLoopObservable = useRef<Observable<Engine>>(new Observable<Engine>())
 
   const canvasRef = useRef<Nullable<HTMLCanvasElement>>(null)
+  const [canvasReady, setCanvasReady] = useState(false)
   const shouldRenderRef = useRef(true)
 
   // const renderOptions: RenderOptions = props.renderOptions ?? {};
@@ -118,6 +119,10 @@ const ReactBabylonjsEngine: React.FC<EngineProps> = (props: EngineProps, context
   }, [isPaused])
 
   useEffect(() => {
+    if (!canvasReady) {
+        return;
+    }
+
     if (canvasRef.current === null) {
       return
     }
@@ -183,7 +188,7 @@ const ReactBabylonjsEngine: React.FC<EngineProps> = (props: EngineProps, context
         engine.current = null
       }
     }
-  }, [canvasRef])
+  }, [canvasReady])
 
   const opts: any = {}
 
@@ -202,7 +207,7 @@ const ReactBabylonjsEngine: React.FC<EngineProps> = (props: EngineProps, context
       <canvas
         {...opts}
         {...canvasProps}
-        ref={canvasRef}
+        ref={(view) => {canvasRef.current = view; setCanvasReady(true)}}
         style={{ width: '100%', height: '100%', ...style }}
       >
         {engine.current !== null && props.children}