@liveblocks/react 1.4.8 → 1.5.0-subdoc

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { ReactElement, ReactNode } from 'react';
 import * as _liveblocks_core from '@liveblocks/core';
 import { CommentBody, BaseMetadata, ThreadData, Resolve, ToImmutable, RoomEventMessage, CommentData, RoomInitializers } from '@liveblocks/core';
-import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Others, Json, Room, Status, BroadcastOptions, LostConnectionEvent, History, Client } from '@liveblocks/client';
+import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Json, Room, Status, BroadcastOptions, OthersEvent, LostConnectionEvent, History, Client } from '@liveblocks/client';
 export { Json, JsonObject, shallow } from '@liveblocks/client';
 
 declare type Props = {
@@ -133,6 +133,8 @@ declare type RoomProviderProps<TPresence extends JsonObject, TStorage extends Ls
      * meaning the RoomProvider tries to connect to Liveblocks servers
      * only on the client side.
      */
+    autoConnect?: boolean;
+    /** @deprecated Renamed to `autoConnect` */
     shouldInitiallyConnect?: boolean;
     /**
      * If you're on React 17 or lower, pass in a reference to
@@ -158,7 +160,7 @@ declare type OmitFirstArg<F> = F extends (first: any, ...rest: infer A) => infer
 declare type MutationContext<TPresence extends JsonObject, TStorage extends LsonObject, TUserMeta extends BaseUserMeta> = {
     storage: LiveObject<TStorage>;
     self: User<TPresence, TUserMeta>;
-    others: Others<TPresence, TUserMeta>;
+    others: readonly User<TPresence, TUserMeta>[];
     setMyPresence: (patch: Partial<TPresence>, options?: {
         addToHistory: boolean;
     }) => void;
@@ -202,6 +204,19 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
      */
     useBroadcastEvent(): (event: TRoomEvent, options?: BroadcastOptions) => void;
+    /**
+     * Get informed when users enter or leave the room, as an event.
+     *
+     * @example
+     * useOthersListener({ type, user, others }) => {
+     *   if (type === 'enter') {
+     *     // `user` has joined the room
+     *   } else if (type === 'leave') {
+     *     // `user` has left the room
+     *   }
+     * })
+     */
+    useOthersListener(callback: (event: OthersEvent<TPresence, TUserMeta>) => void): void;
     /**
      * Get informed when reconnecting to the Liveblocks servers is taking
      * longer than usual. This typically is a sign of a client that has lost
@@ -224,7 +239,8 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      */
     useLostConnectionListener(callback: (event: LostConnectionEvent) => void): void;
     /**
-     * useErrorListener is a react hook that lets you react to potential room connection errors.
+     * useErrorListener is a React hook that allows you to respond to potential room
+     * connection errors.
      *
      * @example
      * useErrorListener(er => {
@@ -233,7 +249,8 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      */
     useErrorListener(callback: (err: Error) => void): void;
     /**
-     * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
+     * useEventListener is a React hook that allows you to respond to events broadcast
+     * by other users in the room.
      *
      * @example
      * useEventListener(({ connectionId, event }) => {
@@ -369,7 +386,7 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      *   </>
      * )
      */
-    useOthers(): Others<TPresence, TUserMeta>;
+    useOthers(): readonly User<TPresence, TUserMeta>[];
     /**
      * Extract arbitrary data based on all the users currently connected in the
      * room (except yourself).
@@ -391,7 +408,7 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      * const someoneIsTyping = useOthers(users => users.some(u => u.presence.isTyping));
      *
      */
-    useOthers<T>(selector: (others: Others<TPresence, TUserMeta>) => T, isEqual?: (prev: T, curr: T) => boolean): T;
+    useOthers<T>(selector: (others: readonly User<TPresence, TUserMeta>[]) => T, isEqual?: (prev: T, curr: T) => boolean): T;
     /**
      * Returns an array of connection IDs. This matches the values you'll get by
      * using the `useOthers()` hook.
@@ -780,6 +797,7 @@ declare function useRoomContextBundle(): {
     RoomProvider: (props: {
         id: string;
         children: React$1.ReactNode;
+        autoConnect?: boolean | undefined;
         shouldInitiallyConnect?: boolean | undefined;
         unstable_batchedUpdates?: ((cb: () => void) => void) | undefined;
         initialPresence: JsonObject | ((roomId: string) => JsonObject);
@@ -789,6 +807,7 @@ declare function useRoomContextBundle(): {
     useStatus: () => Status;
     useBatch: <T>() => (callback: () => T) => T;
     useBroadcastEvent: () => (event: never, options?: BroadcastOptions | undefined) => void;
+    useOthersListener: (callback: (event: OthersEvent<JsonObject, BaseUserMeta>) => void) => void;
     useLostConnectionListener: (callback: (event: LostConnectionEvent) => void) => void;
     useErrorListener: (callback: (err: Error) => void) => void;
     useEventListener: (callback: (data: RoomEventMessage<JsonObject, BaseUserMeta, never>) => void) => void;
@@ -806,8 +825,8 @@ declare function useRoomContextBundle(): {
     } | undefined) => void;
     useMutation: <F extends (context: MutationContext<JsonObject, LsonObject, BaseUserMeta>, ...args: any[]) => any>(callback: F, deps: readonly unknown[]) => OmitFirstArg<F>;
     useOthers: {
-        (): _liveblocks_core.Others<JsonObject, BaseUserMeta>;
-        <T_1>(selector: (others: _liveblocks_core.Others<JsonObject, BaseUserMeta>) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
+        (): readonly User<JsonObject, BaseUserMeta>[];
+        <T_1>(selector: (others: readonly User<JsonObject, BaseUserMeta>[]) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
     };
     useOthersConnectionIds: () => readonly number[];
     useOthersMapped: <T_2>(itemSelector: (other: User<JsonObject, BaseUserMeta>) => T_2, itemIsEqual?: ((prev: T_2, curr: T_2) => boolean) | undefined) => readonly (readonly [connectionId: number, data: T_2])[];
@@ -1136,6 +1155,7 @@ declare function useRoomContextBundle(): {
         RoomProvider: (props: {
             id: string;
             children: React$1.ReactNode;
+            autoConnect?: boolean | undefined;
             shouldInitiallyConnect?: boolean | undefined;
             unstable_batchedUpdates?: ((cb: () => void) => void) | undefined;
             initialPresence: JsonObject | ((roomId: string) => JsonObject);
@@ -1145,6 +1165,7 @@ declare function useRoomContextBundle(): {
         useStatus: () => Status;
         useBatch: <T>() => (callback: () => T) => T;
         useBroadcastEvent: () => (event: never, options?: BroadcastOptions | undefined) => void;
+        useOthersListener: (callback: (event: OthersEvent<JsonObject, BaseUserMeta>) => void) => void;
         useLostConnectionListener: (callback: (event: LostConnectionEvent) => void) => void;
         useErrorListener: (callback: (err: Error) => void) => void;
         useEventListener: (callback: (data: RoomEventMessage<JsonObject, BaseUserMeta, never>) => void) => void;
@@ -1162,8 +1183,8 @@ declare function useRoomContextBundle(): {
         } | undefined) => void;
         useMutation: <F extends (context: MutationContext<JsonObject, LsonObject, BaseUserMeta>, ...args: any[]) => any>(callback: F, deps: readonly unknown[]) => OmitFirstArg<F>;
         useOthers: {
-            (): _liveblocks_core.Others<JsonObject, BaseUserMeta>;
-            <T_1>(selector: (others: _liveblocks_core.Others<JsonObject, BaseUserMeta>) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
+            (): readonly User<JsonObject, BaseUserMeta>[];
+            <T_1>(selector: (others: readonly User<JsonObject, BaseUserMeta>[]) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
         };
         useOthersConnectionIds: () => readonly number[];
         useOthersMapped: <T_2>(itemSelector: (other: User<JsonObject, BaseUserMeta>) => T_2, itemIsEqual?: ((prev: T_2, curr: T_2) => boolean) | undefined) => readonly (readonly [connectionId: number, data: T_2])[];

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { ReactElement, ReactNode } from 'react';
 import * as _liveblocks_core from '@liveblocks/core';
 import { CommentBody, BaseMetadata, ThreadData, Resolve, ToImmutable, RoomEventMessage, CommentData, RoomInitializers } from '@liveblocks/core';
-import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Others, Json, Room, Status, BroadcastOptions, LostConnectionEvent, History, Client } from '@liveblocks/client';
+import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Json, Room, Status, BroadcastOptions, OthersEvent, LostConnectionEvent, History, Client } from '@liveblocks/client';
 export { Json, JsonObject, shallow } from '@liveblocks/client';
 
 declare type Props = {
@@ -133,6 +133,8 @@ declare type RoomProviderProps<TPresence extends JsonObject, TStorage extends Ls
      * meaning the RoomProvider tries to connect to Liveblocks servers
      * only on the client side.
      */
+    autoConnect?: boolean;
+    /** @deprecated Renamed to `autoConnect` */
     shouldInitiallyConnect?: boolean;
     /**
      * If you're on React 17 or lower, pass in a reference to
@@ -158,7 +160,7 @@ declare type OmitFirstArg<F> = F extends (first: any, ...rest: infer A) => infer
 declare type MutationContext<TPresence extends JsonObject, TStorage extends LsonObject, TUserMeta extends BaseUserMeta> = {
     storage: LiveObject<TStorage>;
     self: User<TPresence, TUserMeta>;
-    others: Others<TPresence, TUserMeta>;
+    others: readonly User<TPresence, TUserMeta>[];
     setMyPresence: (patch: Partial<TPresence>, options?: {
         addToHistory: boolean;
     }) => void;
@@ -202,6 +204,19 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
      */
     useBroadcastEvent(): (event: TRoomEvent, options?: BroadcastOptions) => void;
+    /**
+     * Get informed when users enter or leave the room, as an event.
+     *
+     * @example
+     * useOthersListener({ type, user, others }) => {
+     *   if (type === 'enter') {
+     *     // `user` has joined the room
+     *   } else if (type === 'leave') {
+     *     // `user` has left the room
+     *   }
+     * })
+     */
+    useOthersListener(callback: (event: OthersEvent<TPresence, TUserMeta>) => void): void;
     /**
      * Get informed when reconnecting to the Liveblocks servers is taking
      * longer than usual. This typically is a sign of a client that has lost
@@ -224,7 +239,8 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      */
     useLostConnectionListener(callback: (event: LostConnectionEvent) => void): void;
     /**
-     * useErrorListener is a react hook that lets you react to potential room connection errors.
+     * useErrorListener is a React hook that allows you to respond to potential room
+     * connection errors.
      *
      * @example
      * useErrorListener(er => {
@@ -233,7 +249,8 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      */
     useErrorListener(callback: (err: Error) => void): void;
     /**
-     * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
+     * useEventListener is a React hook that allows you to respond to events broadcast
+     * by other users in the room.
      *
      * @example
      * useEventListener(({ connectionId, event }) => {
@@ -369,7 +386,7 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      *   </>
      * )
      */
-    useOthers(): Others<TPresence, TUserMeta>;
+    useOthers(): readonly User<TPresence, TUserMeta>[];
     /**
      * Extract arbitrary data based on all the users currently connected in the
      * room (except yourself).
@@ -391,7 +408,7 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      * const someoneIsTyping = useOthers(users => users.some(u => u.presence.isTyping));
      *
      */
-    useOthers<T>(selector: (others: Others<TPresence, TUserMeta>) => T, isEqual?: (prev: T, curr: T) => boolean): T;
+    useOthers<T>(selector: (others: readonly User<TPresence, TUserMeta>[]) => T, isEqual?: (prev: T, curr: T) => boolean): T;
     /**
      * Returns an array of connection IDs. This matches the values you'll get by
      * using the `useOthers()` hook.
@@ -780,6 +797,7 @@ declare function useRoomContextBundle(): {
     RoomProvider: (props: {
         id: string;
         children: React$1.ReactNode;
+        autoConnect?: boolean | undefined;
         shouldInitiallyConnect?: boolean | undefined;
         unstable_batchedUpdates?: ((cb: () => void) => void) | undefined;
         initialPresence: JsonObject | ((roomId: string) => JsonObject);
@@ -789,6 +807,7 @@ declare function useRoomContextBundle(): {
     useStatus: () => Status;
     useBatch: <T>() => (callback: () => T) => T;
     useBroadcastEvent: () => (event: never, options?: BroadcastOptions | undefined) => void;
+    useOthersListener: (callback: (event: OthersEvent<JsonObject, BaseUserMeta>) => void) => void;
     useLostConnectionListener: (callback: (event: LostConnectionEvent) => void) => void;
     useErrorListener: (callback: (err: Error) => void) => void;
     useEventListener: (callback: (data: RoomEventMessage<JsonObject, BaseUserMeta, never>) => void) => void;
@@ -806,8 +825,8 @@ declare function useRoomContextBundle(): {
     } | undefined) => void;
     useMutation: <F extends (context: MutationContext<JsonObject, LsonObject, BaseUserMeta>, ...args: any[]) => any>(callback: F, deps: readonly unknown[]) => OmitFirstArg<F>;
     useOthers: {
-        (): _liveblocks_core.Others<JsonObject, BaseUserMeta>;
-        <T_1>(selector: (others: _liveblocks_core.Others<JsonObject, BaseUserMeta>) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
+        (): readonly User<JsonObject, BaseUserMeta>[];
+        <T_1>(selector: (others: readonly User<JsonObject, BaseUserMeta>[]) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
     };
     useOthersConnectionIds: () => readonly number[];
     useOthersMapped: <T_2>(itemSelector: (other: User<JsonObject, BaseUserMeta>) => T_2, itemIsEqual?: ((prev: T_2, curr: T_2) => boolean) | undefined) => readonly (readonly [connectionId: number, data: T_2])[];
@@ -1136,6 +1155,7 @@ declare function useRoomContextBundle(): {
         RoomProvider: (props: {
             id: string;
             children: React$1.ReactNode;
+            autoConnect?: boolean | undefined;
             shouldInitiallyConnect?: boolean | undefined;
             unstable_batchedUpdates?: ((cb: () => void) => void) | undefined;
             initialPresence: JsonObject | ((roomId: string) => JsonObject);
@@ -1145,6 +1165,7 @@ declare function useRoomContextBundle(): {
         useStatus: () => Status;
         useBatch: <T>() => (callback: () => T) => T;
         useBroadcastEvent: () => (event: never, options?: BroadcastOptions | undefined) => void;
+        useOthersListener: (callback: (event: OthersEvent<JsonObject, BaseUserMeta>) => void) => void;
         useLostConnectionListener: (callback: (event: LostConnectionEvent) => void) => void;
         useErrorListener: (callback: (err: Error) => void) => void;
         useEventListener: (callback: (data: RoomEventMessage<JsonObject, BaseUserMeta, never>) => void) => void;
@@ -1162,8 +1183,8 @@ declare function useRoomContextBundle(): {
         } | undefined) => void;
         useMutation: <F extends (context: MutationContext<JsonObject, LsonObject, BaseUserMeta>, ...args: any[]) => any>(callback: F, deps: readonly unknown[]) => OmitFirstArg<F>;
         useOthers: {
-            (): _liveblocks_core.Others<JsonObject, BaseUserMeta>;
-            <T_1>(selector: (others: _liveblocks_core.Others<JsonObject, BaseUserMeta>) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
+            (): readonly User<JsonObject, BaseUserMeta>[];
+            <T_1>(selector: (others: readonly User<JsonObject, BaseUserMeta>[]) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
         };
         useOthersConnectionIds: () => readonly number[];
         useOthersMapped: <T_2>(itemSelector: (other: User<JsonObject, BaseUserMeta>) => T_2, itemIsEqual?: ((prev: T_2, curr: T_2) => boolean) | undefined) => readonly (readonly [connectionId: number, data: T_2])[];

package/dist/index.js

@@ -5,7 +5,7 @@ var _core = require('@liveblocks/core');
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "1.4.8";
+var PKG_VERSION = "1.5.0-subdoc";
 var PKG_FORMAT = "cjs";
 
 // src/ClientSideSuspense.tsx
@@ -634,7 +634,7 @@ function useDebounce(value, delay = DEFAULT_DELAY) {
 // src/lib/use-initial.ts
 
 function useInitial(value) {
-  return _react.useRef.call(void 0, value).current;
+  return _react.useState.call(void 0, value)[0];
 }
 
 // src/lib/use-async-cache.ts
@@ -705,6 +705,16 @@ function useAsyncCache(cache, key, options) {
   };
 }
 
+// src/lib/use-latest.ts
+
+function useLatest(value) {
+  const ref = _react.useRef.call(void 0, value);
+  _react.useEffect.call(void 0, () => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+
 // src/lib/use-rerender.ts
 
 function useRerender() {
@@ -732,7 +742,7 @@ var missing_unstable_batchedUpdates = (reactVersion, roomId) => `We noticed you\
       ...
     </RoomProvider>
 
-Why? Please see https://liveblocks.io/docs/guides/troubleshooting#stale-props-zombie-child for more information`;
+Why? Please see https://liveblocks.io/docs/platform/troubleshooting#stale-props-zombie-child for more information`;
 var superfluous_unstable_batchedUpdates = "You don\u2019t need to pass unstable_batchedUpdates to RoomProvider anymore, since you\u2019re on React 18+ already.";
 function useSyncExternalStore3(s, gs, gss) {
   return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, s, gs, gss, identity);
@@ -744,9 +754,6 @@ function alwaysEmptyList() {
 function alwaysNull() {
   return null;
 }
-function alwaysConnecting() {
-  return "connecting";
-}
 function makeMutationContext(room) {
   const errmsg = "This mutation cannot be used until connected to the Liveblocks room";
   return {
@@ -802,14 +809,33 @@ function useRoomContextBundle() {
 }
 function createRoomContext(client, options) {
   const RoomContext = React2.createContext(null);
-  function RoomProvider(props) {
-    const {
-      id: roomId,
-      initialPresence,
-      initialStorage,
-      unstable_batchedUpdates,
-      shouldInitiallyConnect
-    } = props;
+  function RoomProviderOuter(props) {
+    const [cache] = React2.useState(
+      () => /* @__PURE__ */ new Map()
+    );
+    const stableEnterRoom = React2.useCallback(
+      (roomId, options2) => {
+        const cached = cache.get(roomId);
+        if (cached)
+          return cached;
+        const rv = client.enterRoom(
+          roomId,
+          options2
+        );
+        const origLeave = rv.leave;
+        rv.leave = () => {
+          origLeave();
+          cache.delete(roomId);
+        };
+        cache.set(roomId, rv);
+        return rv;
+      },
+      [cache]
+    );
+    return /* @__PURE__ */ React2.createElement(RoomProviderInner, { ...props, stableEnterRoom });
+  }
+  function RoomProviderInner(props) {
+    const { id: roomId, stableEnterRoom } = props;
     if (process.env.NODE_ENV !== "production") {
       if (!roomId) {
         throw new Error(
@@ -830,39 +856,34 @@ function createRoomContext(client, options) {
         superfluous_unstable_batchedUpdates
       );
     }
-    const frozen = useInitial({
-      initialPresence,
-      initialStorage,
-      unstable_batchedUpdates,
-      shouldInitiallyConnect: shouldInitiallyConnect === void 0 ? typeof window !== "undefined" : shouldInitiallyConnect
+    const frozenProps = useInitial({
+      initialPresence: props.initialPresence,
+      initialStorage: props.initialStorage,
+      unstable_batchedUpdates: props.unstable_batchedUpdates,
+      autoConnect: _nullishCoalesce(_nullishCoalesce(props.autoConnect, () => ( props.shouldInitiallyConnect)), () => ( typeof window !== "undefined"))
     });
-    const [room, setRoom] = React2.useState(
-      () => client.enter(roomId, {
-        initialPresence: frozen.initialPresence,
-        initialStorage: frozen.initialStorage,
-        shouldInitiallyConnect: frozen.shouldInitiallyConnect,
-        unstable_batchedUpdates: frozen.unstable_batchedUpdates
+    const [{ room }, setRoomLeavePair] = React2.useState(
+      () => stableEnterRoom(roomId, {
+        ...frozenProps,
+        autoConnect: false
+        // Deliberately using false here on the first render, see below
       })
     );
     React2.useEffect(() => {
-      const room2 = client.enter(
-        roomId,
-        {
-          initialPresence: frozen.initialPresence,
-          initialStorage: frozen.initialStorage,
-          shouldInitiallyConnect: frozen.shouldInitiallyConnect,
-          unstable_batchedUpdates: frozen.unstable_batchedUpdates
-        }
-      );
-      setRoom(room2);
+      const pair = stableEnterRoom(roomId, frozenProps);
+      setRoomLeavePair(pair);
+      const { room: room2, leave } = pair;
+      if (frozenProps.autoConnect) {
+        room2.connect();
+      }
       return () => {
         const commentsRoom = commentsRooms.get(room2);
         if (commentsRoom) {
           commentsRooms.delete(room2);
         }
-        client.leave(roomId);
+        leave();
       };
-    }, [roomId, frozen]);
+    }, [roomId, frozenProps, stableEnterRoom]);
     return /* @__PURE__ */ React2.createElement(RoomContext.Provider, { value: room }, /* @__PURE__ */ React2.createElement(
       ContextBundle.Provider,
       {
@@ -885,7 +906,7 @@ function createRoomContext(client, options) {
     const room = useRoom();
     const subscribe = room.events.status.subscribe;
     const getSnapshot = room.getStatus;
-    const getServerSnapshot = alwaysConnecting;
+    const getServerSnapshot = room.getStatus;
     return useSyncExternalStore3(subscribe, getSnapshot, getServerSnapshot);
   }
   function useMyPresence() {
@@ -972,42 +993,41 @@ function createRoomContext(client, options) {
       [room]
     );
   }
+  function useOthersListener(callback) {
+    const room = useRoom();
+    const savedCallback = useLatest(callback);
+    React2.useEffect(
+      () => room.events.others.subscribe((event) => savedCallback.current(event)),
+      [room, savedCallback]
+    );
+  }
   function useLostConnectionListener(callback) {
     const room = useRoom();
-    const savedCallback = React2.useRef(callback);
-    React2.useEffect(() => {
-      savedCallback.current = callback;
-    });
+    const savedCallback = useLatest(callback);
     React2.useEffect(
       () => room.events.lostConnection.subscribe(
         (event) => savedCallback.current(event)
       ),
-      [room]
+      [room, savedCallback]
     );
   }
   function useErrorListener(callback) {
     const room = useRoom();
-    const savedCallback = React2.useRef(callback);
-    React2.useEffect(() => {
-      savedCallback.current = callback;
-    });
+    const savedCallback = useLatest(callback);
     React2.useEffect(
       () => room.events.error.subscribe((e) => savedCallback.current(e)),
-      [room]
+      [room, savedCallback]
     );
   }
   function useEventListener(callback) {
     const room = useRoom();
-    const savedCallback = React2.useRef(callback);
-    React2.useEffect(() => {
-      savedCallback.current = callback;
-    });
+    const savedCallback = useLatest(callback);
     React2.useEffect(() => {
       const listener = (eventData) => {
         savedCallback.current(eventData);
       };
       return room.events.customEvent.subscribe(listener);
-    }, [room]);
+    }, [room, savedCallback]);
   }
   function useSelf(maybeSelector, isEqual) {
     const room = useRoom();
@@ -1370,11 +1390,12 @@ function createRoomContext(client, options) {
   }
   const bundle = {
     RoomContext,
-    RoomProvider,
+    RoomProvider: RoomProviderOuter,
     useRoom,
     useStatus,
     useBatch,
     useBroadcastEvent,
+    useOthersListener,
     useLostConnectionListener,
     useErrorListener,
     useEventListener,
@@ -1408,11 +1429,12 @@ function createRoomContext(client, options) {
     useRemoveReaction,
     suspense: {
       RoomContext,
-      RoomProvider,
+      RoomProvider: RoomProviderOuter,
       useRoom,
       useStatus,
       useBatch,
       useBroadcastEvent,
+      useOthersListener,
       useLostConnectionListener,
       useErrorListener,
       useEventListener,