From 9b7296a7fd7e210512cce1f8e93101d978bb0c0d Mon Sep 17 00:00:00 2001
From: lukasIO <mail@lukasseiler.de>
Date: Wed, 22 Jan 2025 16:37:12 +0100
Subject: [PATCH] Fix toggle hydration error (#1069)

---
 .changeset/chatty-cups-turn.md                |  5 ++++
 .../src/components/controls/TrackToggle.tsx   | 14 ++++++---
 packages/react/src/prefabs/PreJoin.tsx        | 30 +++++--------------
 3 files changed, 23 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/chatty-cups-turn.md

diff --git a/.changeset/chatty-cups-turn.md b/.changeset/chatty-cups-turn.md
new file mode 100644
index 000000000..f02d661fa
--- /dev/null
+++ b/.changeset/chatty-cups-turn.md
@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Fix toggle hydration error
diff --git a/packages/react/src/components/controls/TrackToggle.tsx b/packages/react/src/components/controls/TrackToggle.tsx
index 079e19b7b..86e5d3390 100644
--- a/packages/react/src/components/controls/TrackToggle.tsx
+++ b/packages/react/src/components/controls/TrackToggle.tsx
@@ -39,10 +39,16 @@ export const TrackToggle: <T extends ToggleSource>(
   T extends ToggleSource,
 >({ showIcon, ...props }: TrackToggleProps<T>, ref: React.ForwardedRef<HTMLButtonElement>) {
   const { buttonProps, enabled } = useTrackToggle(props);
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
   return (
-    <button ref={ref} {...buttonProps}>
-      {(showIcon ?? true) && getSourceIcon(props.source, enabled)}
-      {props.children}
-    </button>
+    isClient && (
+      <button ref={ref} {...buttonProps}>
+        {(showIcon ?? true) && getSourceIcon(props.source, enabled)}
+        {props.children}
+      </button>
+    )
   );
 });
diff --git a/packages/react/src/prefabs/PreJoin.tsx b/packages/react/src/prefabs/PreJoin.tsx
index e2a5e9715..1a2f3a86b 100644
--- a/packages/react/src/prefabs/PreJoin.tsx
+++ b/packages/react/src/prefabs/PreJoin.tsx
@@ -22,7 +22,6 @@ import { log } from '@livekit/components-core';
 import { ParticipantPlaceholder } from '../assets/images';
 import { useMediaDevices, usePersistentUserChoices } from '../hooks';
 import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
-import { defaultUserChoices } from '@livekit/components-core';
 import { roomOptionsStringifyReplacer } from '../utils';
 
 /**
@@ -231,17 +230,6 @@ export function PreJoin({
   videoProcessor,
   ...htmlProps
 }: PreJoinProps) {
-  const [userChoices, setUserChoices] = React.useState(defaultUserChoices);
-
-  // TODO: Remove and pipe `defaults` object directly into `usePersistentUserChoices` once we fully switch from type `LocalUserChoices` to `UserChoices`.
-  const partialDefaults: Partial<LocalUserChoices> = {
-    ...(defaults.audioDeviceId !== undefined && { audioDeviceId: defaults.audioDeviceId }),
-    ...(defaults.videoDeviceId !== undefined && { videoDeviceId: defaults.videoDeviceId }),
-    ...(defaults.audioEnabled !== undefined && { audioEnabled: defaults.audioEnabled }),
-    ...(defaults.videoEnabled !== undefined && { videoEnabled: defaults.videoEnabled }),
-    ...(defaults.username !== undefined && { username: defaults.username }),
-  };
-
   const {
     userChoices: initialUserChoices,
     saveAudioInputDeviceId,
@@ -250,21 +238,19 @@ export function PreJoin({
     saveVideoInputEnabled,
     saveUsername,
   } = usePersistentUserChoices({
-    defaults: partialDefaults,
+    defaults,
     preventSave: !persistUserChoices,
     preventLoad: !persistUserChoices,
   });
 
+  const [userChoices, setUserChoices] = React.useState(initialUserChoices);
+
   // Initialize device settings
-  const [audioEnabled, setAudioEnabled] = React.useState<boolean>(initialUserChoices.audioEnabled);
-  const [videoEnabled, setVideoEnabled] = React.useState<boolean>(initialUserChoices.videoEnabled);
-  const [audioDeviceId, setAudioDeviceId] = React.useState<string>(
-    initialUserChoices.audioDeviceId,
-  );
-  const [videoDeviceId, setVideoDeviceId] = React.useState<string>(
-    initialUserChoices.videoDeviceId,
-  );
-  const [username, setUsername] = React.useState(initialUserChoices.username);
+  const [audioEnabled, setAudioEnabled] = React.useState<boolean>(userChoices.audioEnabled);
+  const [videoEnabled, setVideoEnabled] = React.useState<boolean>(userChoices.videoEnabled);
+  const [audioDeviceId, setAudioDeviceId] = React.useState<string>(userChoices.audioDeviceId);
+  const [videoDeviceId, setVideoDeviceId] = React.useState<string>(userChoices.videoDeviceId);
+  const [username, setUsername] = React.useState(userChoices.username);
 
   // Save user choices to persistent storage.
   React.useEffect(() => {