From a3f70b0f350ae953f1cff9a7b1621027e27434db Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 26 Nov 2025 21:09:10 +0100
Subject: [PATCH] =?UTF-8?q?fix(=F0=9F=90=9B):=20fix=20substancial=20perfor?=
 =?UTF-8?q?mance=20regression=20on=20RN=20Web?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/skia/src/sksg/Recorder/Player.ts | 76 ++++++++++++-----------
 1 file changed, 40 insertions(+), 36 deletions(-)

diff --git a/packages/skia/src/sksg/Recorder/Player.ts b/packages/skia/src/sksg/Recorder/Player.ts
index 62a0538851..698e5ead2e 100644
--- a/packages/skia/src/sksg/Recorder/Player.ts
+++ b/packages/skia/src/sksg/Recorder/Player.ts
@@ -68,46 +68,50 @@ const getZIndex = (command: GroupCommand) => {
   return zIndex;
 };
 
-const play = (ctx: DrawingContext, _command: Command) => {
-  const flushPendingGroups = (
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    ctx: DrawingContext,
-    pendingGroups: PendingGroup[]
-  ) => {
-    "worklet";
-    if (pendingGroups.length === 0) {
+const flushPendingGroups = (
+  ctx: DrawingContext,
+  pendingGroups: PendingGroup[],
+  playFn: (ctx: DrawingContext, cmd: Command) => void
+) => {
+  "worklet";
+  if (pendingGroups.length === 0) {
+    return;
+  }
+  pendingGroups
+    .sort((a, b) =>
+      a.zIndex === b.zIndex ? a.order - b.order : a.zIndex - b.zIndex
+    )
+    .forEach(({ command }) => {
+      playFn(ctx, command);
+    });
+  pendingGroups.length = 0;
+};
+
+const playGroup = (
+  ctx: DrawingContext,
+  group: GroupCommand,
+  playFn: (ctx: DrawingContext, cmd: Command) => void
+) => {
+  "worklet";
+  const pending: PendingGroup[] = [];
+  group.children.forEach((child) => {
+    if (isGroup(child)) {
+      pending.push({
+        command: child,
+        zIndex: getZIndex(child),
+        order: pending.length,
+      });
       return;
     }
-    pendingGroups
-      .sort((a, b) =>
-        a.zIndex === b.zIndex ? a.order - b.order : a.zIndex - b.zIndex
-      )
-      .forEach(({ command }) => {
-        play(ctx, command);
-      });
-    pendingGroups.length = 0;
-  };
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  const playGroup = (ctx: DrawingContext, group: GroupCommand) => {
-    "worklet";
-    const pending: PendingGroup[] = [];
-    group.children.forEach((child) => {
-      if (isGroup(child)) {
-        pending.push({
-          command: child,
-          zIndex: getZIndex(child),
-          order: pending.length,
-        });
-        return;
-      }
-      flushPendingGroups(ctx, pending);
-      play(ctx, child);
-    });
-    flushPendingGroups(ctx, pending);
-  };
+    flushPendingGroups(ctx, pending, playFn);
+    playFn(ctx, child);
+  });
+  flushPendingGroups(ctx, pending, playFn);
+};
 
+const play = (ctx: DrawingContext, _command: Command) => {
   if (isGroup(_command)) {
-    playGroup(ctx, _command);
+    playGroup(ctx, _command, play);
     return;
   }
   const command = materializeCommand(_command);