Prevent unrelated client settings rerenders

apps/web/package.json

@@ -46,6 +46,7 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.4.0",
+    "use-sync-external-store": "^1.6.0",
     "zustand": "^5.0.11"
   },
   "devDependencies": {
@@ -57,6 +58,7 @@
     "@types/babel__core": "^7.20.5",
     "@types/react": "~19.2.14",
     "@types/react-dom": "~19.2.3",
+    "@types/use-sync-external-store": "^1.5.0",
     "@vercel/config": "^0.3.0",
     "@vitejs/plugin-react": "^6.0.0",
     "babel-plugin-react-compiler": "1.0.0",

apps/web/src/hooks/useSettings.ts

@@ -29,6 +29,8 @@ import * as Struct from "effect/Struct";
 import { primaryServerSettingsAtom, serverEnvironment } from "~/state/server";
 import { usePrimaryEnvironment } from "~/state/environments";
 import { useAtomCommand } from "~/state/use-atom-command";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector";
+import { shallow } from "zustand/shallow";
 
 const CLIENT_SETTINGS_PERSISTENCE_ERROR_SCOPE = "[CLIENT_SETTINGS]";
 
@@ -55,6 +57,10 @@ function getClientSettingsSnapshot(): ClientSettings {
   return clientSettingsSnapshot;
 }
 
+function selectClientSettings(settings: ClientSettings): ClientSettings {
+  return settings;
+}
+
 function replaceClientSettingsSnapshot(settings: ClientSettings): void {
   clientSettingsSnapshot = settings;
   emitClientSettingsChange();
@@ -214,8 +220,13 @@ function useMergedSettings<T>(
 export function useClientSettings<T = ClientSettings>(
   selector?: (settings: ClientSettings) => T,
 ): T {
-  const settings = useClientSettingsValue();
-  return useMemo(() => (selector ? selector(settings) : (settings as T)), [selector, settings]);
+  return useSyncExternalStoreWithSelector(
+    subscribeClientSettings,
+    getClientSettingsSnapshot,
+    () => DEFAULT_CLIENT_SETTINGS,
+    selector ?? (selectClientSettings as (settings: ClientSettings) => T),
+    selector ? shallow : Object.is,
+  );
 }
 
 /** Read current settings for one environment, merged with client-local preferences. */