Merge pull request pmndrs#19 from eyr1n/strictmode

Support React.StrictMode
FunTechInc · May 8, 2024 · 076a8f6 · 076a8f6
2 parents 923ac9e + 0472178
commit 076a8f6
Showing 1 changed file with 20 additions and 19 deletions.
diff --git a/src/Canvas.tsx b/src/Canvas.tsx
@@ -26,15 +26,32 @@ function isRefObject<T>(ref: any): ref is React.MutableRefObject<T> {
 export function Canvas({ eventSource, worker, fallback, style, className, id, ...props }: CanvasProps) {
   const [shouldFallback, setFallback] = React.useState(false)
   const canvasRef = useRef<HTMLCanvasElement>(null!)
+  const hasTransferredToOffscreen = useRef(false)
 
   useEffect(() => {
     if (!worker) return
 
     const canvas = canvasRef.current
-    let offscreen
     try {
-      // @ts-ignore
-      offscreen = canvasRef.current.transferControlToOffscreen()
+      if (!hasTransferredToOffscreen.current) {
+        const offscreen = canvasRef.current.transferControlToOffscreen()
+        hasTransferredToOffscreen.current = true
+        worker.postMessage(
+          {
+            type: 'init',
+            payload: {
+              props,
+              drawingSurface: offscreen,
+              width: canvas.clientWidth,
+              height: canvas.clientHeight,
+              top: canvas.offsetTop,
+              left: canvas.offsetLeft,
+              pixelRatio: window.devicePixelRatio,
+            },
+          },
+          [offscreen]
+        )
+      }
     } catch (e) {
       // Browser doesn't support offscreen canvas at all
       setFallback(true)
@@ -48,22 +65,6 @@ export function Canvas({ eventSource, worker, fallback, style, className, id, ..
       }
     }
 
-    worker.postMessage(
-      {
-        type: 'init',
-        payload: {
-          props,
-          drawingSurface: offscreen,
-          width: canvas.clientWidth,
-          height: canvas.clientHeight,
-          top: canvas.offsetTop,
-          left: canvas.offsetLeft,
-          pixelRatio: window.devicePixelRatio,
-        },
-      },
-      [offscreen]
-    )
-
     const currentEventSource = isRefObject(eventSource) ? eventSource.current : eventSource || canvas
 
     Object.values(EVENTS).forEach(([eventName, passive]) => {