@pluv/react 0.38.13 → 0.39.0

package/dist/index.mjs

@@ -1,14 +1,136 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
 // src/createBundle.tsx
 import { MockedRoom } from "@pluv/client";
+import fastDeepEqual2 from "fast-deep-equal";
+import { createContext, memo, useCallback as useCallback4, useContext, useEffect as useEffect3, useMemo as useMemo2, useState as useState4 } from "react";
+
+// src/internal/hooks/useAsyncQueue.ts
+import { useCallback, useMemo, useRef } from "react";
+var useAsyncQueue = () => {
+  const queueRef = useRef(Promise.resolve(void 0));
+  const push = useCallback((promise) => __async(void 0, null, function* () {
+    queueRef.current = queueRef.current.then(() => __async(void 0, null, function* () {
+      return yield promise;
+    }));
+    return yield queueRef.current;
+  }), []);
+  return useMemo(() => ({ push }), [push]);
+};
+
+// src/internal/hooks/useDeepAsyncMemo.ts
+import { useEffect, useRef as useRef2, useState } from "react";
 import fastDeepEqual from "fast-deep-equal";
-import { createContext, memo, useCallback as useCallback3, useContext, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
+var useDeepAsyncMemo = (factory, isEqual = fastDeepEqual) => {
+  const [state, setState] = useState({
+    isInitialized: false,
+    isLoading: true,
+    value: void 0,
+    error: null
+  });
+  const lastValueRef = useRef2(void 0);
+  const hasValueRef = useRef2(false);
+  const inflightRef = useRef2(null);
+  const isMountedRef = useRef2(true);
+  useEffect(() => {
+    isMountedRef.current = true;
+    const promise = factory();
+    inflightRef.current = promise;
+    setState((prev) => {
+      return __spreadProps(__spreadValues({}, prev), {
+        isLoading: true,
+        error: null
+      });
+    });
+    promise.then((result) => {
+      if (!isMountedRef.current || inflightRef.current !== promise) return;
+      const isSame = hasValueRef.current && isEqual(lastValueRef.current, result);
+      if (isSame) {
+        setState((prev) => {
+          return __spreadProps(__spreadValues({}, prev), {
+            isInitialized: true,
+            isLoading: false
+          });
+        });
+        return;
+      }
+      lastValueRef.current = result;
+      hasValueRef.current = true;
+      setState({
+        isInitialized: true,
+        isLoading: false,
+        value: result,
+        error: null
+      });
+    }).catch((err) => {
+      if (!isMountedRef.current || inflightRef.current !== promise) return;
+      setState({
+        isInitialized: hasValueRef.current,
+        isLoading: false,
+        value: void 0,
+        error: err instanceof Error ? err : new Error("Unknown error")
+      });
+    });
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [
+    /**
+     * !HACK
+     * @description We're only going to use the `isEqual` function to determine if this hook
+     * should re-run. This is basically our hook's version of a dependency array
+     * @date April 13, 2025
+     */
+    // factory,
+    isEqual
+  ]);
+  return state;
+};
 
 // src/internal/hooks/useNoSsr.ts
-import { useCallback, useEffect, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
 var useNoSsr = () => {
-  const [didMount, setDidMount] = useState(false);
-  useEffect(() => setDidMount(typeof window !== "undefined"), []);
-  const noSsr = useCallback(
+  const [didMount, setDidMount] = useState2(false);
+  useEffect2(() => setDidMount(typeof window !== "undefined"), []);
+  const noSsr = useCallback2(
     (value, fallback = null) => {
       return didMount ? typeof value !== "function" ? value : value() : fallback;
     },
@@ -18,16 +140,16 @@ var useNoSsr = () => {
 };
 
 // src/internal/hooks/useRerender.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
+import { useCallback as useCallback3, useState as useState3 } from "react";
 var useRerender = () => {
-  const [, setCount] = useState2(0);
-  return useCallback2(() => {
+  const [, setCount] = useState3(0);
+  return useCallback3(() => {
     setCount((oldCount) => (oldCount + 1) % Number.MAX_SAFE_INTEGER);
   }, []);
 };
 
 // src/internal/hooks/useSyncExternalStoreWithSelector.ts
-import { useRef, useSyncExternalStore } from "react";
+import { useRef as useRef3, useSyncExternalStore } from "react";
 
 // src/internal/utils/identity.ts
 var identity = (x) => x;
@@ -43,7 +165,7 @@ var shallowEqual = (a, b) => a === b;
 // src/internal/hooks/useSyncExternalStoreWithSelector.ts
 var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerSnapshot, selector, isEqual) => {
   const noSsr = useNoSsr();
-  const cacheRef = useRef(null);
+  const cacheRef = useRef3(null);
   const _getServerSnapshot = getServerSnapshot ? () => {
     const data = getServerSnapshot();
     const snapshot = selector(data);
@@ -71,10 +193,10 @@ import { jsx } from "react/jsx-runtime";
 var createBundle = (client, options = {}) => {
   const PluvContext = createContext(null);
   const PluvRoomContext = createContext(null);
-  const MockedRoomContext = createContext({ room: null });
+  const MockedRoomContext = createContext(null);
   const MockedRoomProvider = memo((props) => {
     const { children, events, initialPresence, initialStorage, room: _room } = props;
-    const [room] = useState3(() => {
+    const [room] = useState4(() => {
       var _a;
       return new MockedRoom(_room, {
         events,
@@ -82,14 +204,28 @@ var createBundle = (client, options = {}) => {
         initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage
       });
     });
-    return /* @__PURE__ */ jsx(MockedRoomContext.Provider, { value: { room }, children: /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: room, children }) });
+    return /* @__PURE__ */ jsx(MockedRoomContext.Provider, { value: room, children: /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: room, children }) });
   });
   MockedRoomProvider.displayName = "MockedRoomProvider";
   const PluvRoomProvider = memo((props) => {
-    const { children, debug, initialPresence, initialStorage, metadata, onAuthorizationFail, room: _room } = props;
+    const {
+      children,
+      connect = true,
+      debug,
+      initialPresence,
+      initialStorage,
+      metadata,
+      onAuthorizationFail,
+      room: _room
+    } = props;
+    const queue = useAsyncQueue();
     const rerender = useRerender();
-    const { room: mockedRoom } = useContext(MockedRoomContext);
-    const [room] = useState3(() => {
+    const mockedRoom = useContext(MockedRoomContext);
+    const resolvedMeta = useDeepAsyncMemo(() => __async(void 0, null, function* () {
+      const resolved = yield Promise.resolve(typeof metadata === "function" ? metadata() : metadata);
+      return !!room.metadata ? room.metadata.parse(metadata) : resolved;
+    }));
+    const [room] = useState4(() => {
       var _a;
       return client.createRoom(_room, {
         addons: options.addons,
@@ -101,7 +237,7 @@ var createBundle = (client, options = {}) => {
         router: options.router
       });
     });
-    useEffect2(() => {
+    useEffect3(() => {
       const unsubscribe = room.subscribe("connection", () => {
         rerender();
       });
@@ -109,12 +245,33 @@ var createBundle = (client, options = {}) => {
         unsubscribe();
       };
     }, [rerender, room]);
-    useEffect2(() => {
-      client.enter(room);
+    useEffect3(() => {
+      const leaveRoom = () => __async(void 0, null, function* () {
+        yield queue.push(
+          client.leave(room).catch((error) => {
+            console.error(error);
+          })
+        );
+      });
+      if (!connect) {
+        leaveRoom();
+        return;
+      }
+      if (!resolvedMeta.isInitialized) {
+        leaveRoom();
+        return;
+      }
+      const resolved = resolvedMeta.value;
+      queue.push(
+        client.enter(room, ...[{ metadata: resolved }]).catch((error) => __async(void 0, null, function* () {
+          console.error(error);
+          yield leaveRoom();
+        }))
+      );
       return () => {
-        client.leave(room);
+        leaveRoom();
       };
-    }, [room]);
+    }, [connect, queue, resolvedMeta.isInitialized, resolvedMeta.value, room]);
     return /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: mockedRoom != null ? mockedRoom : room, children });
   });
   PluvRoomProvider.displayName = "PluvRoomProvider";
@@ -131,13 +288,13 @@ var createBundle = (client, options = {}) => {
   };
   const useBroadcast = () => {
     const room = useRoom();
-    const broadcast = useCallback3(
+    const broadcast = useCallback4(
       (event2, data) => {
         room.broadcast(event2, data);
       },
       [room]
     );
-    return useMemo(() => {
+    return useMemo2(() => {
       return new Proxy(broadcast, {
         get(fn, prop) {
           return (data) => {
@@ -149,35 +306,35 @@ var createBundle = (client, options = {}) => {
   };
   const useCanRedo = () => {
     const room = useRoom();
-    const subscribe = useCallback3((onStoreChange) => room.storageRoot(onStoreChange), [room]);
-    const getSnapshot = useCallback3(() => room.canRedo(), [room]);
+    const subscribe = useCallback4((onStoreChange) => room.storageRoot(onStoreChange), [room]);
+    const getSnapshot = useCallback4(() => room.canRedo(), [room]);
     const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
     return canRedo;
   };
   const useCanUndo = () => {
     const room = useRoom();
-    const subscribe = useCallback3((onStoreChange) => room.storageRoot(onStoreChange), [room]);
-    const getSnapshot = useCallback3(() => room.canUndo(), [room]);
+    const subscribe = useCallback4((onStoreChange) => room.storageRoot(onStoreChange), [room]);
+    const getSnapshot = useCallback4(() => room.canUndo(), [room]);
     const canUndo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
     return canUndo;
   };
   const useConnection = (selector = identity, options2) => {
     var _a;
     const room = useRoom();
-    const subscribe = useCallback3(
+    const subscribe = useCallback4(
       (onStoreChange) => {
         return room.subscribe("connection", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getConnection;
-    const _selector = useCallback3((snapshot) => selector(snapshot), [selector]);
+    const _selector = useCallback4((snapshot) => selector(snapshot), [selector]);
     return useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual2
     );
   };
   const useDoc = () => {
@@ -186,7 +343,7 @@ var createBundle = (client, options = {}) => {
   };
   const useEvent = (type, callback) => {
     const room = useRoom();
-    useEffect2(() => {
+    useEffect3(() => {
       const unsubscribe = room.event(type, callback);
       return () => {
         unsubscribe();
@@ -207,34 +364,34 @@ var createBundle = (client, options = {}) => {
   const useMyPresence = (selector = identity, options2) => {
     var _a;
     const room = useRoom();
-    const subscribe = useCallback3(
+    const subscribe = useCallback4(
       (onStoreChange) => {
         return room.subscribe("my-presence", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getMyPresence;
-    const _selector = useCallback3((snapshot) => selector(snapshot), [selector]);
+    const _selector = useCallback4((snapshot) => selector(snapshot), [selector]);
     const myPresence = useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual2
     );
     return [myPresence, room.updateMyPresence];
   };
   const useMyself = (selector = identity, options2) => {
     var _a;
     const room = useRoom();
-    const subscribe = useCallback3(
+    const subscribe = useCallback4(
       (onStoreChange) => {
         return room.subscribe("myself", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getMyself;
-    const _selector = useCallback3(
+    const _selector = useCallback4(
       (snapshot) => {
         return !snapshot ? null : selector(snapshot);
       },
@@ -245,20 +402,20 @@ var createBundle = (client, options = {}) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual2
     );
   };
   const useOther = (connectionId, selector = identity, options2) => {
     var _a;
     const room = useRoom();
-    const subscribe = useCallback3(
+    const subscribe = useCallback4(
       (onStoreChange) => {
         return room.other(connectionId, onStoreChange);
       },
       [room, connectionId]
     );
-    const getSnapshot = useCallback3(() => room.getOther(connectionId), [room, connectionId]);
-    const _selector = useCallback3(
+    const getSnapshot = useCallback4(() => room.getOther(connectionId), [room, connectionId]);
+    const _selector = useCallback4(
       (snapshot) => {
         return !snapshot ? null : selector(snapshot);
       },
@@ -269,13 +426,13 @@ var createBundle = (client, options = {}) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual2
     );
   };
   const useOthers = (selector = identity, options2) => {
     var _a;
     const room = useRoom();
-    const subscribe = useCallback3(
+    const subscribe = useCallback4(
       (onStoreChange) => {
         return room.subscribe("others", onStoreChange);
       },
@@ -291,7 +448,7 @@ var createBundle = (client, options = {}) => {
         if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
           return shallowArrayEqual(a, b);
         }
-        return fastDeepEqual(a, b);
+        return fastDeepEqual2(a, b);
       }
     );
   };
@@ -306,11 +463,11 @@ var createBundle = (client, options = {}) => {
     room.subscribe("storage-loaded", () => {
       rerender();
     });
-    const subscribe = useCallback3((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
-    const getSnapshot = useCallback3(() => {
+    const subscribe = useCallback4((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
+    const getSnapshot = useCallback4(() => {
       return room.getStorageJson(key);
     }, [key, room]);
-    const _selector = useCallback3(
+    const _selector = useCallback4(
       (snapshot) => {
         return snapshot === null ? null : selector(snapshot);
       },
@@ -321,7 +478,7 @@ var createBundle = (client, options = {}) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual2
     );
     const sharedType = (_b = room.getStorage(key)) != null ? _b : null;
     return [data, sharedType];

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { reactConfig } from "eslint-config-pluv/react";
+
+/** @type {import("eslint").Linter.Config} */
+export default reactConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "0.38.13",
+  "version": "0.39.0",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,27 +18,27 @@
   },
   "dependencies": {
     "fast-deep-equal": "^3.1.3",
-    "@pluv/client": "^0.38.13",
-    "@pluv/crdt": "^0.38.13",
-    "@pluv/types": "^0.38.13"
+    "@pluv/client": "^0.39.0",
+    "@pluv/types": "^0.39.0",
+    "@pluv/crdt": "^0.39.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.0",
-    "eslint": "^8.57.1",
+    "@types/react": "^19.1.1",
+    "eslint": "^9.24.0",
     "react": "^19.1.0",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "@pluv/tsconfig": "^0.38.13",
-    "eslint-config-pluv": "^0.38.13"
+    "@pluv/tsconfig": "^0.39.0",
+    "eslint-config-pluv": "^0.39.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
     "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
-    "lint": "eslint src/**/*.ts* --fix",
+    "lint": "eslint src/**/*.ts* --fix --max-warnings 0",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   }
 }

package/src/createBundle.tsx

@@ -1,6 +1,7 @@
 import type {
     AbstractRoom,
     CreateRoomOptions,
+    EnterRoomParams,
     MergeEvents,
     MockedRoomEvents,
     PluvClient,
@@ -13,11 +14,18 @@ import type {
 } from "@pluv/client";
 import { MockedRoom, PluvRoom } from "@pluv/client";
 import type { AbstractCrdtDoc, CrdtType, InferCrdtJson } from "@pluv/crdt";
-import type { Id, InferIOInput, InferIOOutput, IOEventMessage, IOLike, JsonObject } from "@pluv/types";
+import type { Id, InferIOInput, InferIOOutput, IOEventMessage, IOLike, JsonObject, MaybePromise } from "@pluv/types";
 import fastDeepEqual from "fast-deep-equal";
 import type { Dispatch, FC, ReactNode } from "react";
 import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { identity, shallowArrayEqual, useRerender, useSyncExternalStoreWithSelector } from "./internal";
+import {
+    identity,
+    shallowArrayEqual,
+    useAsyncQueue,
+    useDeepAsyncMemo,
+    useRerender,
+    useSyncExternalStoreWithSelector,
+} from "./internal";
 
 export interface PluvProviderProps {
     children?: ReactNode;
@@ -38,15 +46,18 @@ export type MockedRoomProviderProps<
     events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
 };
 
+export type MetadataGetter<TMetadata extends JsonObject> = TMetadata | (() => MaybePromise<TMetadata>);
+
 export type PluvRoomProviderProps<
     TIO extends IOLike<any, any>,
     TMetadata extends JsonObject,
     TPresence extends JsonObject,
     TStorage extends Record<string, CrdtType<any, any>>,
 > = BaseRoomProviderProps<TPresence, TStorage> & {
+    connect?: boolean;
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
-} & (keyof TMetadata extends never ? { metadata?: undefined } : { metadata: TMetadata });
+} & (keyof TMetadata extends never ? { metadata?: undefined } : { metadata: MetadataGetter<TMetadata> });
 
 export interface SubscriptionHookOptions<T extends unknown> {
     isEqual?: (a: T, b: T) => boolean;
@@ -151,7 +162,6 @@ export const createBundle = <
      * !HACK
      * @description We'll let the context error out if client is not provided,
      * and let the users deal with it.
-     * @author leedavidcs
      * @date October 27, 2022
      */
     const PluvContext = createContext<PluvClient<TIO, TPresence, TStorage, TMetadata>>(null as any);
@@ -160,14 +170,11 @@ export const createBundle = <
      * !HACK
      * @description We'll let the context error out if the room is not provided,
      * and let the users deal with it.
-     * @author leedavidcs
      * @date November 11, 2022
      */
     const PluvRoomContext = createContext<AbstractRoom<TIO, TPresence, TStorage>>(null as any);
 
-    const MockedRoomContext = createContext<{
-        room: AbstractRoom<TIO, TPresence, TStorage> | null;
-    }>({ room: null });
+    const MockedRoomContext = createContext<AbstractRoom<TIO, TPresence, TStorage> | null>(null);
 
     const MockedRoomProvider = memo<MockedRoomProviderProps<TIO, TPresence, TStorage>>((props) => {
         const { children, events, initialPresence, initialStorage, room: _room } = props;
@@ -184,7 +191,7 @@ export const createBundle = <
         });
 
         return (
-            <MockedRoomContext.Provider value={{ room }}>
+            <MockedRoomContext.Provider value={room}>
                 <PluvRoomContext.Provider value={room}>{children}</PluvRoomContext.Provider>
             </MockedRoomContext.Provider>
         );
@@ -193,10 +200,26 @@ export const createBundle = <
     MockedRoomProvider.displayName = "MockedRoomProvider";
 
     const PluvRoomProvider = memo<PluvRoomProviderProps<TIO, TMetadata, TPresence, TStorage>>((props) => {
-        const { children, debug, initialPresence, initialStorage, metadata, onAuthorizationFail, room: _room } = props;
-
+        const {
+            children,
+            connect = true,
+            debug,
+            initialPresence,
+            initialStorage,
+            metadata,
+            onAuthorizationFail,
+            room: _room,
+        } = props;
+
+        const queue = useAsyncQueue();
         const rerender = useRerender();
-        const { room: mockedRoom } = useContext(MockedRoomContext);
+        const mockedRoom = useContext(MockedRoomContext);
+
+        const resolvedMeta = useDeepAsyncMemo(async () => {
+            const resolved = await Promise.resolve(typeof metadata === "function" ? metadata() : metadata);
+
+            return !!room.metadata ? room.metadata.parse(metadata) : resolved;
+        });
 
         const [room] = useState<PluvRoom<TIO, TMetadata, TPresence, TStorage, TEvents>>(() => {
             return client.createRoom(_room, {
@@ -224,12 +247,37 @@ export const createBundle = <
         }, [rerender, room]);
 
         useEffect(() => {
-            client.enter(room);
+            const leaveRoom = async (): Promise<void> => {
+                await queue.push(
+                    client.leave(room).catch((error) => {
+                        console.error(error);
+                    }),
+                );
+            };
+
+            if (!connect) {
+                leaveRoom();
+                return;
+            }
+
+            if (!resolvedMeta.isInitialized) {
+                leaveRoom();
+                return;
+            }
+
+            const resolved = resolvedMeta.value as TMetadata;
+
+            queue.push(
+                client.enter(room, ...([{ metadata: resolved }] as EnterRoomParams<TMetadata>)).catch(async (error) => {
+                    console.error(error);
+                    await leaveRoom();
+                }),
+            );
 
             return () => {
-                client.leave(room);
+                leaveRoom();
             };
-        }, [room]);
+        }, [connect, queue, resolvedMeta.isInitialized, resolvedMeta.value, room]);
 
         return <PluvRoomContext.Provider value={mockedRoom ?? room}>{children}</PluvRoomContext.Provider>;
     });

package/src/internal/hooks/index.ts

@@ -1,3 +1,5 @@
+export { useAsyncQueue } from "./useAsyncQueue";
+export { useDeepAsyncMemo } from "./useDeepAsyncMemo";
 export { useNoSsr } from "./useNoSsr";
 export { useRerender } from "./useRerender";
 export { useSyncExternalStoreWithSelector } from "./useSyncExternalStoreWithSelector";

package/src/internal/hooks/useAsyncQueue.ts

@@ -0,0 +1,18 @@
+import { useCallback, useMemo, useRef } from "react";
+
+/**
+ * @description This is to handle race conditions, so that our async operations that can
+ * happen between re-renders will happen sequentially.
+ * @date April 13, 2025
+ */
+export const useAsyncQueue = () => {
+    const queueRef = useRef<Promise<void>>(Promise.resolve(undefined));
+
+    const push = useCallback(async (promise: Promise<any>) => {
+        queueRef.current = queueRef.current.then(async () => await promise);
+
+        return await queueRef.current;
+    }, []);
+
+    return useMemo(() => ({ push }), [push]);
+};