fix(core): don't create RaF in render

pmndrs · May 30, 2022 · 5aeb6cd · 5aeb6cd
1 parent bd21181
commit 5aeb6cd
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 19 deletions.
diff --git a/src/Canvas.native.tsx b/src/Canvas.native.tsx
@@ -64,7 +64,26 @@ export const Canvas = React.forwardRef<View, CanvasProps>(function Canvas(
         orthographic,
         frameloop,
         events,
-        onCreated,
+        onCreated(state) {
+          // Animate
+          const animate = (time?: number) => {
+            // Cancel animation if frameloop is set, otherwise keep looping
+            if (state.frameloop === 'never') return cancelAnimationFrame(state.animation)
+            state.animation = requestAnimationFrame(animate)
+
+            // Call subscribed elements
+            state.subscribed.forEach((ref) => ref.current?.(state, time))
+
+            // If rendering manually, skip render
+            if (state.priority) return
+
+            // Render to screen
+            state.renderer.render({ scene: state.scene, camera: state.camera })
+          }
+          if (state.frameloop !== 'never') animate()
+
+          return onCreated?.(state)
+        },
       },
     ).getState()
 

diff --git a/src/Canvas.tsx b/src/Canvas.tsx
@@ -68,7 +68,26 @@ export const Canvas = React.forwardRef<HTMLCanvasElement, CanvasProps>(function
         orthographic,
         frameloop,
         events,
-        onCreated,
+        onCreated(state) {
+          // Animate
+          const animate = (time?: number) => {
+            // Cancel animation if frameloop is set, otherwise keep looping
+            if (state.frameloop === 'never') return cancelAnimationFrame(state.animation)
+            state.animation = requestAnimationFrame(animate)
+
+            // Call subscribed elements
+            state.subscribed.forEach((ref) => ref.current?.(state, time))
+
+            // If rendering manually, skip render
+            if (state.priority) return
+
+            // Render to screen
+            state.renderer.render({ scene: state.scene, camera: state.camera })
+          }
+          if (state.frameloop !== 'never') animate()
+
+          return onCreated?.(state)
+        },
       },
     ).getState()
 

diff --git a/src/renderer.tsx b/src/renderer.tsx
@@ -112,23 +112,6 @@ export const render = (
     // Handle callback
     config.onCreated?.(state)
 
-    // Animate
-    const animate = (time?: number) => {
-      // Cancel animation if frameloop is set, otherwise keep looping
-      if (state.frameloop === 'never') return cancelAnimationFrame(state.animation)
-      state.animation = requestAnimationFrame(animate)
-
-      // Call subscribed elements
-      state.subscribed.forEach((ref) => ref.current?.(state, time))
-
-      // If rendering manually, skip render
-      if (state.priority) return
-
-      // Render to screen
-      state.renderer.render({ scene: state.scene, camera: state.camera })
-    }
-    if (state.frameloop !== 'never') animate()
-
     // Create root fiber
     const fiber = reconciler.createContainer(state, RENDER_MODES[mode] ?? RENDER_MODES['blocking'], false, null)