experiment(Canvas): don't setState canvas ref (#2797)

pmndrs · Mar 6, 2023 · 34a3801 · 34a3801
1 parent fb5bcda
commit 34a3801
Showing 1 changed file with 51 additions and 50 deletions.
diff --git a/packages/fiber/src/web/Canvas.tsx b/packages/fiber/src/web/Canvas.tsx
@@ -59,7 +59,6 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<HTMLCanvasElement, Props>(func
   const [containerRef, containerRect] = useMeasure({ scroll: true, debounce: { scroll: 50, resize: 0 }, ...resize })
   const canvasRef = React.useRef<HTMLCanvasElement>(null!)
   const divRef = React.useRef<HTMLDivElement>(null!)
-  const [canvas, setCanvas] = React.useState<HTMLCanvasElement | null>(null)
   React.useImperativeHandle(forwardedRef, () => canvasRef.current)
 
   const handlePointerMissed = useMutableCallback(onPointerMissed)
@@ -73,58 +72,60 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<HTMLCanvasElement, Props>(func
 
   const root = React.useRef<ReconcilerRoot<HTMLCanvasElement>>(null!)
 
-  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
-    if (!root.current) root.current = createRoot<HTMLCanvasElement>(canvas)
-    root.current.configure({
-      gl,
-      events,
-      shadows,
-      linear,
-      flat,
-      legacy,
-      orthographic,
-      frameloop,
-      dpr,
-      performance,
-      raycaster,
-      camera,
-      size: containerRect,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current?.(...args),
-      onCreated: (state) => {
-        // Connect to event source
-        state.events.connect?.(eventSource ? (isRef(eventSource) ? eventSource.current : eventSource) : divRef.current)
-        // Set up compute function
-        if (eventPrefix) {
-          state.setEvents({
-            compute: (event, state) => {
-              const x = event[(eventPrefix + 'X') as keyof DomEvent] as number
-              const y = event[(eventPrefix + 'Y') as keyof DomEvent] as number
-              state.pointer.set((x / state.size.width) * 2 - 1, -(y / state.size.height) * 2 + 1)
-              state.raycaster.setFromCamera(state.pointer, state.camera)
-            },
-          })
-        }
-        // Call onCreated callback
-        onCreated?.(state)
-      },
-    })
-    root.current.render(
-      <Bridge>
-        <ErrorBoundary set={setError}>
-          <React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>
-        </ErrorBoundary>
-      </Bridge>,
-    )
-  }
-
   useIsomorphicLayoutEffect(() => {
-    setCanvas(canvasRef.current)
-  }, [])
+    const canvas = canvasRef.current
+    if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
+      if (!root.current) root.current = createRoot<HTMLCanvasElement>(canvas)
+      root.current.configure({
+        gl,
+        events,
+        shadows,
+        linear,
+        flat,
+        legacy,
+        orthographic,
+        frameloop,
+        dpr,
+        performance,
+        raycaster,
+        camera,
+        size: containerRect,
+        // Pass mutable reference to onPointerMissed so it's free to update
+        onPointerMissed: (...args) => handlePointerMissed.current?.(...args),
+        onCreated: (state) => {
+          // Connect to event source
+          state.events.connect?.(
+            eventSource ? (isRef(eventSource) ? eventSource.current : eventSource) : divRef.current,
+          )
+          // Set up compute function
+          if (eventPrefix) {
+            state.setEvents({
+              compute: (event, state) => {
+                const x = event[(eventPrefix + 'X') as keyof DomEvent] as number
+                const y = event[(eventPrefix + 'Y') as keyof DomEvent] as number
+                state.pointer.set((x / state.size.width) * 2 - 1, -(y / state.size.height) * 2 + 1)
+                state.raycaster.setFromCamera(state.pointer, state.camera)
+              },
+            })
+          }
+          // Call onCreated callback
+          onCreated?.(state)
+        },
+      })
+      root.current.render(
+        <Bridge>
+          <ErrorBoundary set={setError}>
+            <React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>
+          </ErrorBoundary>
+        </Bridge>,
+      )
+    }
+  })
 
   React.useEffect(() => {
-    if (canvas) return () => unmountComponentAtNode(canvas!)
-  }, [canvas])
+    const canvas = canvasRef.current
+    if (canvas) return () => unmountComponentAtNode(canvas)
+  }, [])
 
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source