Disconnect when LiveKitRoom unmounts

[lukasIO]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5d27f7d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@livekit/react-components	Patch
@livekit/react-core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[davidzhao]

lgtm!

[merazgasalim]

Hello,
After upgrading to @livekit/react-components 1.0.2, I start getting this TypeError: _b.reject is not a function on Dev environment but not in Production
I think the issue is in the new addition to disconnect Room on Livekit component unmount because with React 18 useEffect is called Twice in development environment

May be the following will fix the issue

` const shouldDisconnect = useRef(false);
useEffect(() => {
roomState.connect(url, token, connectOptions).then((room) => {
if (!room) {
return;
}
if (onConnected && room.state === ConnectionState.Connected) {
onConnected(room);
}
});

return () => {
  if (
    roomState.room?.state !== ConnectionState.Disconnected &&
    shouldDisconnect.current
  ) {
    roomState.room?.disconnect();
  } else {
    shouldDisconnect.current = true;
  }
};

}, []);`

[lukasIO]

hi @merazgasalim,
thanks for the report! Are you also on the latest livekit-client version (v1.3.1) ?
this sounds like the error originates in the livekit-client package. do you have a stack trace (with source maps) of where the error is being thrown?

[merazgasalim]

Hi @lukasIO

I just upgraded livekit-client to v1.3.1 but still the same problem.

I'm sure it's related to the double useEffect call. I just downloaded the livekit/livekit-react and made the example app in React Strict Mode so the bug appears

to reproduce the bug just update the App.tsx in example/src like that

`import '@livekit/react-components/dist/index.css';
import { HashRouter as Router, Route, Routes } from 'react-router-dom';
import { PreJoinPage } from './PreJoinPage';
import { RoomPage } from './RoomPage';

import React from 'react';

const App = () => {
return (

<React.StrictMode>


<Route path="/room" element={} />
<Route path="/" element={} />


</React.StrictMode>

);
};

export default App;`

Here's also the stack Error
Uncaught (in promise) TypeError: _b.reject is not a function at _callee85$ (Room.ts:366:1) at tryCatch (runtime.js:63:1) at Generator.invoke [as _invoke] (runtime.js:294:1) at Generator.next (runtime.js:119:1) at asyncGeneratorStep (asyncToGenerator.js:3:1) at _next (asyncToGenerator.js:25:1) at asyncToGenerator.js:32:1 at new Promise (<anonymous>) at Room.disconnect (asyncToGenerator.js:21:1) at LiveKitRoom.tsx:48:1

[lukasIO]

Oh, thanks for the details! I was under the impression that we are using strict mode by default since we upgraded to react v18. will take a look and open a new issue for this

[merazgasalim]

I think that I found the issue!
Calling disconnect() while the room state is in connecting state causes this bug

I updated the useEffect return like that and the bug is fixed

if (roomState.room?.state === ConnectionState.Connected) { roomState.room?.disconnect(); }

[Mihai-github]

Hi, @merazgasalim,

I'm having the issue with Livekit not disconnecting when my component unmounts even though I'm trying to force it by calling the disconnect function inside the unmount of the useEffect hook:

useEffect(() => {
        return () => {
            (async () => {
                await roomCall?.disconnect();
            })();
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

Versions

"livekit-client": "^1.4.2"
"@livekit/react-components": "^1.0.3"