canvu-react 0.3.12 → 0.3.13

package/dist/realtime.cjs

@@ -2074,6 +2074,10 @@ function useRealtimeSession(options) {
   }, []);
   const applyDocument = react.useCallback(
     (snapshot, options2) => {
+      const currentSnapshot = latestDocumentRef.current;
+      if (currentSnapshot && currentSnapshot.revision === snapshot.revision && currentSnapshot.updatedByClientId === snapshot.updatedByClientId && sameSerializedItems(currentSnapshot.items, snapshot.items)) {
+        return;
+      }
       currentRevisionRef.current = snapshot.revision;
       latestDocumentRef.current = snapshot;
       setDocument(snapshot);
@@ -2997,7 +3001,12 @@ function useRealtimeCanvasDocument(options) {
   } = options;
   const [loading, setLoading] = react.useState(false);
   const lastAppliedRevisionRef = react.useRef(null);
+  const inFlightRevisionRef = react.useRef(null);
   const realtimeEnabled = enabled && session != null;
+  const documentRevision = session?.document?.revision ?? null;
+  const documentItems = session?.document?.items;
+  const documentUpdatedByClientId = session?.document?.updatedByClientId ?? null;
+  const connectionClientId = session?.connection.clientId ?? null;
   const applyIncomingItems = react.useCallback(
     async (nextItems) => {
       const normalizedItems = normalizeItems ? normalizeItems(nextItems) : [...nextItems];
@@ -3020,22 +3029,38 @@ function useRealtimeCanvasDocument(options) {
   );
   react.useEffect(() => {
     if (!realtimeEnabled || !onItemsChange || !session?.document) return;
-    if (session.document.updatedByClientId === session.connection.clientId) return;
-    if (lastAppliedRevisionRef.current === session.document.revision) return;
+    if (documentUpdatedByClientId === connectionClientId) return;
+    if (documentRevision == null) return;
+    if (lastAppliedRevisionRef.current === documentRevision) return;
+    if (inFlightRevisionRef.current === documentRevision) return;
+    inFlightRevisionRef.current = documentRevision;
     let cancelled = false;
     setLoading(true);
-    void applyIncomingItems(session.document.items).then((resolvedItems) => {
+    void applyIncomingItems(documentItems ?? []).then((resolvedItems) => {
       if (cancelled) return;
-      lastAppliedRevisionRef.current = session.document?.revision ?? null;
+      if (inFlightRevisionRef.current !== documentRevision) return;
+      lastAppliedRevisionRef.current = documentRevision;
       onItemsChange(resolvedItems);
     }).finally(() => {
+      if (inFlightRevisionRef.current === documentRevision) {
+        inFlightRevisionRef.current = null;
+      }
       if (cancelled) return;
       setLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [applyIncomingItems, realtimeEnabled, onItemsChange, session]);
+  }, [
+    applyIncomingItems,
+    connectionClientId,
+    documentItems,
+    documentRevision,
+    documentUpdatedByClientId,
+    onItemsChange,
+    realtimeEnabled,
+    session?.document
+  ]);
   return react.useMemo(
     () => ({
       items,