From df3276fc877e50d56202cd511e2b4ce4bf17b814 Mon Sep 17 00:00:00 2001
From: Ryan Vogel <ryan@mandarin3d.com>
Date: Mon, 30 Mar 2026 08:28:25 -0400
Subject: [PATCH] refactor mobile web color hydration

Replace the hydration state effect with useSyncExternalStore so the web color-scheme hook keeps its static-render fallback without triggering the set-state-in-effect lint warning.
---
 .../src/hooks/use-color-scheme.web.ts         | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/mobile-voice/src/hooks/use-color-scheme.web.ts b/packages/mobile-voice/src/hooks/use-color-scheme.web.ts
index 7eb1c1b707..44ee8659f3 100644
--- a/packages/mobile-voice/src/hooks/use-color-scheme.web.ts
+++ b/packages/mobile-voice/src/hooks/use-color-scheme.web.ts
@@ -1,21 +1,29 @@
-import { useEffect, useState } from 'react';
-import { useColorScheme as useRNColorScheme } from 'react-native';
+import { useSyncExternalStore } from "react"
+import { useColorScheme as useRNColorScheme } from "react-native"
+
+function subscribe() {
+  return () => {}
+}
+
+function getSnapshot() {
+  return true
+}
+
+function getServerSnapshot() {
+  return false
+}
 
 /**
  * To support static rendering, this value needs to be re-calculated on the client side for web
  */
 export function useColorScheme() {
-  const [hasHydrated, setHasHydrated] = useState(false);
+  const hasHydrated = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 
-  useEffect(() => {
-    setHasHydrated(true);
-  }, []);
-
-  const colorScheme = useRNColorScheme();
+  const colorScheme = useRNColorScheme()
 
   if (hasHydrated) {
-    return colorScheme;
+    return colorScheme
   }
 
-  return 'light';
+  return "light"
 }