@emeryld/rrroutes-client 2.2.4 → 2.2.5

package/dist/index.cjs

@@ -691,6 +691,10 @@ function createSocketedRouteHook(args) {
   const { buildRoute, useClient = () => useSocketClient() } = args;
   return function useSocketedRoute(params) {
     const { routeKey, socketEvent, handlers, buildOptions, buildMeta, useOptions } = params;
+    const handlersRef = (0, import_react.useRef)(handlers);
+    (0, import_react.useEffect)(() => {
+      handlersRef.current = handlers;
+    }, [handlers]);
     const endpoint = (0, import_react.useMemo)(
       () => buildRoute(routeKey, buildOptions, buildMeta),
       [buildRoute, routeKey, buildOptions, buildMeta]
@@ -700,23 +704,31 @@ function createSocketedRouteHook(args) {
     const roomsKey = rooms.slice().sort().join("|");
     const applyRooms = (0, import_react.useCallback)(
       (page) => {
-        if (!handlers.onReceiveRooms) return;
+        const onReceiveRooms = handlersRef.current.onReceiveRooms;
+        if (!onReceiveRooms) return;
         setRooms((prev) => {
-          const next = handlers.onReceiveRooms(page, prev);
-          return Array.from(new Set(next.filter(Boolean)));
+          const next = onReceiveRooms(page, prev);
+          const unique = Array.from(new Set(next.filter(Boolean)));
+          if (prev.length === unique.length && prev.every((room, idx) => room === unique[idx])) {
+            return prev;
+          }
+          return unique;
         });
       },
-      [handlers]
+      []
     );
     const routeArgs = useOptions?.args;
     const callerOptions = useOptions?.options;
-    const mergedOptions = {
-      ...callerOptions ?? {},
-      onReceive(page) {
-        callerOptions?.onReceive?.(page);
-        applyRooms(page);
-      }
-    };
+    const mergedOptions = (0, import_react.useMemo)(
+      () => ({
+        ...callerOptions ?? {},
+        onReceive(page) {
+          callerOptions?.onReceive?.(page);
+          applyRooms(page);
+        }
+      }),
+      [callerOptions, applyRooms]
+    );
     const endpointArgs = routeArgs ? [routeArgs, mergedOptions] : [mergedOptions];
     const { data } = endpoint.useEndpoint(...endpointArgs);
     (0, import_react.useEffect)(() => {
@@ -730,23 +742,24 @@ function createSocketedRouteHook(args) {
     }, [data, applyRooms]);
     (0, import_react.useEffect)(() => {
       const stop = client.on(socketEvent, (payload, meta) => {
-        const updater = (prev) => handlers.handleMessage(prev, payload, meta);
+        const updater = (prev) => handlersRef.current.handleMessage(prev, payload, meta);
         const setDataArgs = routeArgs ? [routeArgs] : [];
         endpoint.setData(updater, ...setDataArgs);
       });
       return stop;
-    }, [client, socketEvent, endpoint, handlers]);
+    }, [client, socketEvent, endpoint, routeArgs]);
     (0, import_react.useEffect)(() => {
       let cancelled = false;
+      const { joinMeta, leaveMeta } = handlersRef.current;
       (async () => {
         if (!rooms.length) return;
         try {
-          await client.joinRooms(rooms, handlers.joinMeta);
+          await client.joinRooms(rooms, joinMeta);
         } catch {
         }
         if (cancelled) {
           try {
-            await client.leaveRooms(rooms, handlers.leaveMeta);
+            await client.leaveRooms(rooms, leaveMeta);
           } catch {
           }
         }
@@ -754,10 +767,10 @@ function createSocketedRouteHook(args) {
       return () => {
         cancelled = true;
         if (!rooms.length) return;
-        client.leaveRooms(rooms, handlers.leaveMeta).catch(() => {
+        client.leaveRooms(rooms, leaveMeta).catch(() => {
         });
       };
-    }, [client, roomsKey, handlers.joinMeta, handlers.leaveMeta, rooms]);
+    }, [client, roomsKey, rooms]);
     return { data, rooms };
   };
 }