update @livekit/components-react

Author: thomasyuill-livekit

components/app/app.tsx

@@ -4,7 +4,18 @@ import { RoomAudioRenderer, StartAudio } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
 import { ViewController } from '@/components/app/view-controller';
 import { Toaster } from '@/components/livekit/toaster';
+import { useAgentErrors } from '@/hooks/useAgentErrors';
 import { ConnectionProvider } from '@/hooks/useConnection';
+import { useDebugMode } from '@/hooks/useDebug';
+
+const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
+
+function AppSetup() {
+  useDebugMode({ enabled: IN_DEVELOPMENT });
+  useAgentErrors();
+
+  return null;
+}
 
 interface AppProps {
   appConfig: AppConfig;
@@ -13,6 +24,7 @@ interface AppProps {
 export function App({ appConfig }: AppProps) {
   return (
     <ConnectionProvider appConfig={appConfig}>
+      <AppSetup />
       <main className="grid h-svh grid-cols-1 place-content-center">
         <ViewController appConfig={appConfig} />
       </main>

components/app/view-controller.tsx

@@ -5,11 +5,7 @@ import { AnimatePresence, type AnimationDefinition, motion } from 'motion/react'
 import type { AppConfig } from '@/app-config';
 import { SessionView } from '@/components/app/session-view';
 import { WelcomeView } from '@/components/app/welcome-view';
-import { useAgentErrors } from '@/hooks/useAgentErrors';
 import { useConnection } from '@/hooks/useConnection';
-import { useDebugMode } from '@/hooks/useDebug';
-
-const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
 
 const MotionWelcomeView = motion.create(WelcomeView);
 const MotionSessionView = motion.create(SessionView);
@@ -39,9 +35,6 @@ interface ViewControllerProps {
 export function ViewController({ appConfig }: ViewControllerProps) {
   const { isConnectionActive, connect, onDisconnectTransitionComplete } = useConnection();
 
-  useDebugMode({ enabled: IN_DEVELOPMENT });
-  useAgentErrors();
-
   const handleAnimationComplete = useCallback(
     (definition: AnimationDefinition) => {
       // manually end the session when the exit animation completes

hooks/useAgentErrors.tsx

@@ -5,7 +5,7 @@ import { useConnection } from './useConnection';
 
 export function useAgentErrors() {
   const agent = useAgent();
-  const { isConnectionActive, disconnect } = useConnection();
+  const { isConnectionActive, startDisconnectTransition } = useConnection();
 
   useEffect(() => {
     if (isConnectionActive && agent.state === 'failed') {
@@ -38,7 +38,7 @@ export function useAgentErrors() {
         ),
       });
 
-      disconnect();
+      startDisconnectTransition();
     }
-  }, [agent, isConnectionActive, disconnect]);
+  }, [agent, isConnectionActive, startDisconnectTransition]);
 }

hooks/useConnection.tsx

@@ -66,32 +66,28 @@ export function ConnectionProvider({ appConfig, children }: ConnectionProviderPr
     return TokenSource.endpoint('/api/connection-details');
   }, [appConfig]);
 
-  const sessionOptions = useMemo(
-    () => (appConfig.agentName ? { agentName: appConfig.agentName } : undefined),
-    [appConfig]
+  const session = useSession(
+    tokenSource,
+    appConfig.agentName ? { agentName: appConfig.agentName } : undefined
   );
 
-  const session = useSession(tokenSource, sessionOptions);
+  const { start: startSession, end: endSession } = session;
 
-  const value = useMemo(
-    () => ({
+  const value = useMemo(() => {
+    return {
       isConnectionActive,
       connect: () => {
         setIsConnectionActive(true);
-        session.start();
+        startSession();
       },
       startDisconnectTransition: () => {
         setIsConnectionActive(false);
       },
       onDisconnectTransitionComplete: () => {
-        session.end();
+        endSession();
       },
-    }),
-    // session object is not a stable reference
-    // TODO: add session object to dependencies
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-    [isConnectionActive]
-  );
+    };
+  }, [startSession, endSession, isConnectionActive]);
 
   return (
     <SessionProvider session={session}>

package.json

@@ -11,7 +11,7 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
-    "@livekit/components-react": "0.0.0-20251021151641",
+    "@livekit/components-react": "^2.9.15",
     "@livekit/protocol": "^1.40.0",
     "@phosphor-icons/react": "^2.1.8",
     "@radix-ui/react-select": "^2.2.5",
@@ -21,7 +21,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jose": "^6.0.12",
-    "livekit-client": "^2.15.8",
+    "livekit-client": "^2.15.15",
     "livekit-server-sdk": "^2.13.2",
     "mime": "^4.0.7",
     "motion": "^12.16.0",