Fix toggle hydration error (#1069)

Author: lukasIO

.changeset/chatty-cups-turn.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Fix toggle hydration error

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>
+    )
   );
 });

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(() => {