diff --git a/example/App.tsx b/example/App.tsx index 5fedb37..e8a366a 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -60,11 +60,6 @@ function App() { setConvId(convIds[nextConv]); }, [convId]); - const createUser = useCallback(() => { - console.log("createUser"); - return new Talk.User(me); - }, [me]); - const createConv = useCallback( (session: Talk.Session) => { console.log("createConv"); @@ -141,7 +136,7 @@ function App() { <> new Talk.User(me)} onBrowserPermissionNeeded={onPerm} onUnreadsChange={onUnreads} sessionRef={sessionRef} diff --git a/lib/Session.tsx b/lib/Session.tsx index 3c16be0..51af3ef 100644 --- a/lib/Session.tsx +++ b/lib/Session.tsx @@ -39,14 +39,21 @@ export function Session(props: SessionProps) { Talk.ready.then(() => markReady(true)); }, []); - useEffect(() => { - if (ready) { - const me = - typeof syncUser === "function" - ? syncUser() - : syncUser ?? new Talk.User(userId); + const me = ready + ? typeof syncUser === "function" + ? syncUser() + : syncUser ?? new Talk.User(userId) + : null; - const session = new Talk.Session({ appId, me, token, tokenFetcher, signature }); + useEffect(() => { + if (me) { + const session = new Talk.Session({ + appId, + me, + token, + tokenFetcher, + signature, + }); setSession(session); if (sessionRef) { sessionRef.current = session; @@ -65,7 +72,21 @@ export function Session(props: SessionProps) { } }; } - }, [ready, signature, appId, userId, syncUser, sessionRef]); + // We intentionally add `me?.id` to the dependency array here instead of + // just `me`, because `me` is an object so a shallow comparison will always + // return `false`. + // + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ + ready, + signature, + appId, + userId, + me?.id, + token, + tokenFetcher, + sessionRef, + ]); useMethod( session,