From 39f08a0b72a7247113c7107b694e7a30c43ca738 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 18 Dec 2024 14:47:53 +0100
Subject: [PATCH 1/2] =?UTF-8?q?chore(=F0=9F=93=9A):=20remove=20manual=20co?=
 =?UTF-8?q?ntext=20injection=20example=20(#2815)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes #2777
---
 apps/docs/docs/canvas/contexts.md | 33 -------------------------------
 1 file changed, 33 deletions(-)

diff --git a/apps/docs/docs/canvas/contexts.md b/apps/docs/docs/canvas/contexts.md
index 0f938a3e13..d4c4d0b9c5 100644
--- a/apps/docs/docs/canvas/contexts.md
+++ b/apps/docs/docs/canvas/contexts.md
@@ -13,39 +13,6 @@ However, if you need to use a React context within your drawing, you must re-inj
 
 We found [its-fine](https://github.com/pmndrs/its-fine), also used by [react-three-fiber](https://github.com/pmndrs/react-three-fiber), to provide an elegant solution to this problem.
 
-## Manual Context Injection
-
-```tsx twoslash
-import React from "react";
-import { Canvas, Fill } from "@shopify/react-native-skia";
-import {useTheme, ThemeProvider} from "./docs/getting-started/Theme";
-
-const MyDrawing = () => {
-  const { primary } = useTheme();
-  return <Fill color={primary} />;
-};
-
-export const Layer = () => {
-  const theme = useTheme();
-  return (
-    <Canvas style={{ flex: 1 }}>
-      {/* We need to re-inject the context provider here.  */}
-      <ThemeProvider primary={theme.primary}>
-        <MyDrawing />
-      </ThemeProvider>
-    </Canvas>
-  );
-};
-
-export const App = () => {
-  return (
-    <ThemeProvider primary="red">
-      <Layer />
-    </ThemeProvider>
-  );
-};
-```
-
 ## Using `its-fine`
 
 ```tsx twoslash

From cca99c4782855781d9c0e0294f820e354bda2ea6 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 18 Dec 2024 16:02:12 +0100
Subject: [PATCH 2/2] =?UTF-8?q?fix(=F0=9F=8E=A8):=20fix=20race=20condition?=
 =?UTF-8?q?=20in=20SkiaDomView=20(#2823)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes #2814

The race condition would occur when prop update in the view would trigger a redraw request, then the DOM  would also emit a  redraw request itself would get canceled due to the pending redraw. That first redraw request however, is not using the updated DOM version.

We are rearchitecturing this part of the system at the moment, where such issues won't be possible anymore. However this should be good fix for now.
---
 packages/skia/src/views/SkiaDomView.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/skia/src/views/SkiaDomView.tsx b/packages/skia/src/views/SkiaDomView.tsx
index baad65a810..26b4d1f5e2 100644
--- a/packages/skia/src/views/SkiaDomView.tsx
+++ b/packages/skia/src/views/SkiaDomView.tsx
@@ -52,7 +52,9 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
-    this.tick();
+    if (onSize !== prevProps.onSize || root !== prevProps.root) {
+      this.tick();
+    }
   }
 
   componentWillUnmount(): void {