@automerge/automerge-repo-react-hooks 2.3.0-alpha.0 → 2.3.1

package/dist/helpers/useSet.d.ts

@@ -0,0 +1,2 @@
+export declare function useSet<T>(items: T[]): Set<T>;
+//# sourceMappingURL=useSet.d.ts.map

package/dist/helpers/useSet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSet.d.ts","sourceRoot":"","sources":["../../src/helpers/useSet.ts"],"names":[],"mappings":"AAEA,wBAAgB,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAY5C"}

package/dist/index.js

@@ -1,232 +1,242 @@
-import q, { createContext as I, useContext as j, useRef as $, useState as b, useEffect as y, useCallback as S } from "react";
+import q, { createContext as I, useContext as j, useRef as $, useState as E, useEffect as g, useCallback as R } from "react";
 function O(o) {
-  let l = "pending", r, i;
+  let i = "pending", n, f;
   const h = o.then(
     (p) => {
-      l = "success", r = p;
+      i = "success", n = p;
     },
     (p) => {
-      l = "error", i = p;
+      i = "error", f = p;
     }
   );
   return {
     promise: o,
     read() {
-      switch (l) {
+      switch (i) {
         case "pending":
           throw h;
         case "error":
-          throw i;
+          throw f;
         case "success":
-          return r;
+          return n;
       }
     }
   };
 }
-const F = I(null);
+const z = I(null);
 function k() {
-  const o = j(F);
+  const o = j(z);
   if (!o) throw new Error("Repo was not found on RepoContext.");
   return o;
 }
 const x = /* @__PURE__ */ new Map();
-function N(o, { suspense: l } = { suspense: !1 }) {
-  const r = k(), i = $(), [h, p] = b();
+function F(o, { suspense: i } = { suspense: !1 }) {
+  const n = k(), f = $(), [h, p] = E();
   let u = h;
   if (o && !u) {
-    const t = r.findWithProgress(o);
-    t.state === "ready" && (u = t.handle);
+    const e = n.findWithProgress(o);
+    e.state === "ready" && (u = e.handle);
   }
-  let n = o ? x.get(o) : void 0;
-  if (!n && o) {
-    i.current?.abort(), i.current = new AbortController();
-    const t = r.find(o, { signal: i.current.signal });
-    n = O(t), x.set(o, n);
+  let r = o ? x.get(o) : void 0;
+  if (!r && o) {
+    f.current?.abort(), f.current = new AbortController();
+    const e = n.find(o, { signal: f.current.signal });
+    r = O(e), x.set(o, r);
   }
-  return y(() => {
-    l || !n || n.promise.then((t) => {
-      p(t);
+  return g(() => {
+    u || i || !r || r.promise.then((e) => {
+      p(e);
     }).catch(() => {
       p(void 0);
     });
-  }, [l, n]), u || !l || !n ? u : n.read();
+  }, [u, i, r]), u || !i || !r ? u : r.read();
 }
-function Q(o, l = { suspense: !1 }) {
-  const r = N(o, l), [i, h] = b(() => r?.doc()), [p, u] = b();
-  y(() => {
-    h(r?.doc());
-  }, [r]), y(() => {
-    if (!r)
+function X(o, i = { suspense: !1 }) {
+  const n = F(o, i), [f, h] = E(() => n?.doc()), [p, u] = E();
+  g(() => {
+    h(n?.doc());
+  }, [n]), g(() => {
+    if (!n)
       return;
-    const t = () => h(r.doc()), e = () => {
+    const e = () => h(n.doc()), t = () => {
       u(new Error(`Document ${o} was deleted`));
     };
-    return r.on("change", t), r.on("delete", e), () => {
-      r.removeListener("change", t), r.removeListener("delete", e);
+    return n.on("change", e), n.on("delete", t), () => {
+      n.removeListener("change", e), n.removeListener("delete", t);
     };
-  }, [r, o]);
-  const n = S(
-    (t, e) => {
-      r.change(t, e);
+  }, [n, o]);
+  const r = R(
+    (e, t) => {
+      n.change(e, t);
     },
-    [r]
+    [n]
   );
   if (p)
     throw p;
-  return i ? [i, n] : [void 0, () => {
+  return f ? [f, r] : [void 0, () => {
   }];
 }
-function W(o, { suspense: l = !1 } = {}) {
-  const r = k(), [i, h] = b(() => {
-    const n = /* @__PURE__ */ new Map();
-    for (const t of o) {
-      let e;
+function N(o) {
+  const [i, n] = E(() => new Set(o));
+  return g(() => {
+    const f = new Set(o);
+    W(i, f) || n(f);
+  }, [i, o]), i;
+}
+function W(o, i) {
+  return o.size === i.size && Array.from(o).every((n) => i.has(n));
+}
+function T(o, { suspense: i = !1 } = {}) {
+  const n = N(o), f = k(), [h, p] = E(() => {
+    const e = /* @__PURE__ */ new Map();
+    for (const t of n.values()) {
+      let s;
       try {
-        e = r.findWithProgress(t);
+        s = f.findWithProgress(t);
       } catch {
         continue;
       }
-      e.state === "ready" && n.set(t, e.handle);
+      s.state === "ready" && e.set(t, s.handle);
     }
-    return n;
-  }), p = [], u = /* @__PURE__ */ new Map();
-  for (const n of o) {
-    let t = i.get(n), e = x.get(n);
-    if (!e)
+    return e;
+  }), u = [], r = /* @__PURE__ */ new Map();
+  for (const e of n.values()) {
+    let t = h.get(e), s = x.get(e);
+    if (!s)
       try {
-        const s = r.find(n);
-        e = O(s), x.set(n, e);
+        const c = f.find(e);
+        s = O(c), x.set(e, s);
       } catch {
         continue;
       }
     try {
-      t ??= e.read(), u.set(n, t);
-    } catch (s) {
-      s instanceof Promise ? p.push(e) : u.set(n, void 0);
+      t ??= s.read(), r.set(e, t);
+    } catch (c) {
+      c instanceof Promise ? u.push(s) : r.set(e, void 0);
     }
   }
-  if (y(() => {
-    p.length > 0 ? Promise.allSettled(p.map((n) => n.promise)).then(
-      (n) => {
-        n.forEach((t) => {
+  if (g(() => {
+    u.length > 0 ? Promise.allSettled(u.map((e) => e.promise)).then(
+      (e) => {
+        e.forEach((t) => {
           if (t.status === "fulfilled") {
-            const e = t.value;
-            u.set(e.url, e);
+            const s = t.value;
+            r.set(s.url, s);
           }
-        }), h(u);
+        }), p(r);
       }
-    ) : h(u);
-  }, [l, o]), l && p.length > 0)
-    throw Promise.all(p.map((n) => n.promise));
-  return i;
+    ) : p(r);
+  }, [i, n]), i && u.length > 0)
+    throw Promise.all(u.map((e) => e.promise));
+  return h;
 }
-function V(o, { suspense: l = !0 } = {}) {
-  const r = W(o, { suspense: l }), [i, h] = b(() => {
+function Y(o, { suspense: i = !0 } = {}) {
+  const n = T(o, { suspense: i }), [f, h] = E(() => {
     const u = /* @__PURE__ */ new Map();
-    return r.forEach((n) => {
-      const t = n?.url;
-      t && u.set(t, n?.doc());
+    return n.forEach((r) => {
+      const e = r?.url;
+      e && u.set(e, r?.doc());
     }), u;
   });
-  y(() => {
+  g(() => {
     const u = /* @__PURE__ */ new Map();
-    return r.forEach((n, t) => {
-      if (n) {
-        const e = () => {
+    return n.forEach((r, e) => {
+      if (r) {
+        const t = () => {
           h((s) => {
             const c = new Map(s);
-            return c.set(t, n.doc()), c;
+            return c.set(e, r.doc()), c;
           });
         };
         h((s) => {
           const c = new Map(s);
-          return c.set(t, n.doc()), c;
-        }), n.on("change", e), u.set(t, e);
+          return c.set(e, r.doc()), c;
+        }), r.on("change", t), u.set(e, t);
       }
-    }), h((n) => {
-      const t = new Map(n);
-      for (const [e] of t)
-        r.has(e) || t.delete(e);
-      return t;
+    }), h((r) => {
+      const e = new Map(r);
+      for (const [t] of e)
+        n.has(t) || e.delete(t);
+      return e;
     }), () => {
-      r.forEach((n, t) => {
-        const e = u.get(t);
-        n && e && n.removeListener("change", e);
+      n.forEach((r, e) => {
+        const t = u.get(e);
+        r && t && r.removeListener("change", t);
       });
     };
-  }, [r]);
-  const p = S(
-    (u, n, t) => {
-      const e = r.get(u);
-      e && e.change(n, t);
+  }, [n]);
+  const p = R(
+    (u, r, e) => {
+      const t = n.get(u);
+      t && t.change(r, e);
     },
-    [r]
+    [n]
   );
-  return [i, p];
+  return [f, p];
 }
-function H(o) {
+function A(o) {
   return o && o.__esModule && Object.prototype.hasOwnProperty.call(o, "default") ? o.default : o;
 }
-var C, P;
-function T() {
-  if (P) return C;
-  P = 1;
-  var o = q, l = function(i) {
-    return typeof i == "function";
-  }, r = function(i) {
-    var h = o.useState(i), p = h[0], u = h[1], n = o.useRef(p), t = o.useCallback(function(e) {
-      n.current = l(e) ? e(n.current) : e, u(n.current);
+var S, M;
+function B() {
+  if (M) return S;
+  M = 1;
+  var o = q, i = function(f) {
+    return typeof f == "function";
+  }, n = function(f) {
+    var h = o.useState(f), p = h[0], u = h[1], r = o.useRef(p), e = o.useCallback(function(t) {
+      r.current = i(t) ? t(r.current) : t, u(r.current);
     }, []);
-    return [p, t, n];
+    return [p, e, r];
   };
-  return C = r, C;
+  return S = n, S;
 }
-var z = T();
-const L = /* @__PURE__ */ H(z);
-var D = { exports: {} }, R;
-function B() {
-  return R || (R = 1, function(o) {
-    var l = Object.prototype.hasOwnProperty, r = "~";
-    function i() {
+var G = B();
+const D = /* @__PURE__ */ A(G);
+var C = { exports: {} }, P;
+function J() {
+  return P || (P = 1, function(o) {
+    var i = Object.prototype.hasOwnProperty, n = "~";
+    function f() {
     }
-    Object.create && (i.prototype = /* @__PURE__ */ Object.create(null), new i().__proto__ || (r = !1));
-    function h(t, e, s) {
-      this.fn = t, this.context = e, this.once = s || !1;
+    Object.create && (f.prototype = /* @__PURE__ */ Object.create(null), new f().__proto__ || (n = !1));
+    function h(e, t, s) {
+      this.fn = e, this.context = t, this.once = s || !1;
     }
-    function p(t, e, s, c, w) {
+    function p(e, t, s, c, w) {
       if (typeof s != "function")
         throw new TypeError("The listener must be a function");
-      var v = new h(s, c || t, w), f = r ? r + e : e;
-      return t._events[f] ? t._events[f].fn ? t._events[f] = [t._events[f], v] : t._events[f].push(v) : (t._events[f] = v, t._eventsCount++), t;
+      var v = new h(s, c || e, w), l = n ? n + t : t;
+      return e._events[l] ? e._events[l].fn ? e._events[l] = [e._events[l], v] : e._events[l].push(v) : (e._events[l] = v, e._eventsCount++), e;
     }
-    function u(t, e) {
-      --t._eventsCount === 0 ? t._events = new i() : delete t._events[e];
+    function u(e, t) {
+      --e._eventsCount === 0 ? e._events = new f() : delete e._events[t];
     }
-    function n() {
-      this._events = new i(), this._eventsCount = 0;
+    function r() {
+      this._events = new f(), this._eventsCount = 0;
     }
-    n.prototype.eventNames = function() {
-      var e = [], s, c;
-      if (this._eventsCount === 0) return e;
+    r.prototype.eventNames = function() {
+      var t = [], s, c;
+      if (this._eventsCount === 0) return t;
       for (c in s = this._events)
-        l.call(s, c) && e.push(r ? c.slice(1) : c);
-      return Object.getOwnPropertySymbols ? e.concat(Object.getOwnPropertySymbols(s)) : e;
-    }, n.prototype.listeners = function(e) {
-      var s = r ? r + e : e, c = this._events[s];
+        i.call(s, c) && t.push(n ? c.slice(1) : c);
+      return Object.getOwnPropertySymbols ? t.concat(Object.getOwnPropertySymbols(s)) : t;
+    }, r.prototype.listeners = function(t) {
+      var s = n ? n + t : t, c = this._events[s];
       if (!c) return [];
       if (c.fn) return [c.fn];
-      for (var w = 0, v = c.length, f = new Array(v); w < v; w++)
-        f[w] = c[w].fn;
-      return f;
-    }, n.prototype.listenerCount = function(e) {
-      var s = r ? r + e : e, c = this._events[s];
+      for (var w = 0, v = c.length, l = new Array(v); w < v; w++)
+        l[w] = c[w].fn;
+      return l;
+    }, r.prototype.listenerCount = function(t) {
+      var s = n ? n + t : t, c = this._events[s];
       return c ? c.fn ? 1 : c.length : 0;
-    }, n.prototype.emit = function(e, s, c, w, v, f) {
-      var m = r ? r + e : e;
+    }, r.prototype.emit = function(t, s, c, w, v, l) {
+      var m = n ? n + t : t;
       if (!this._events[m]) return !1;
-      var a = this._events[m], g = arguments.length, _, d;
+      var a = this._events[m], y = arguments.length, _, d;
       if (a.fn) {
-        switch (a.once && this.removeListener(e, a.fn, void 0, !0), g) {
+        switch (a.once && this.removeListener(t, a.fn, void 0, !0), y) {
           case 1:
             return a.fn.call(a.context), !0;
           case 2:
@@ -238,15 +248,15 @@ function B() {
           case 5:
             return a.fn.call(a.context, s, c, w, v), !0;
           case 6:
-            return a.fn.call(a.context, s, c, w, v, f), !0;
+            return a.fn.call(a.context, s, c, w, v, l), !0;
         }
-        for (d = 1, _ = new Array(g - 1); d < g; d++)
+        for (d = 1, _ = new Array(y - 1); d < y; d++)
           _[d - 1] = arguments[d];
         a.fn.apply(a.context, _);
       } else {
-        var A = a.length, E;
-        for (d = 0; d < A; d++)
-          switch (a[d].once && this.removeListener(e, a[d].fn, void 0, !0), g) {
+        var H = a.length, b;
+        for (d = 0; d < H; d++)
+          switch (a[d].once && this.removeListener(t, a[d].fn, void 0, !0), y) {
             case 1:
               a[d].fn.call(a[d].context);
               break;
@@ -260,107 +270,107 @@ function B() {
               a[d].fn.call(a[d].context, s, c, w);
               break;
             default:
-              if (!_) for (E = 1, _ = new Array(g - 1); E < g; E++)
-                _[E - 1] = arguments[E];
+              if (!_) for (b = 1, _ = new Array(y - 1); b < y; b++)
+                _[b - 1] = arguments[b];
               a[d].fn.apply(a[d].context, _);
           }
       }
       return !0;
-    }, n.prototype.on = function(e, s, c) {
-      return p(this, e, s, c, !1);
-    }, n.prototype.once = function(e, s, c) {
-      return p(this, e, s, c, !0);
-    }, n.prototype.removeListener = function(e, s, c, w) {
-      var v = r ? r + e : e;
+    }, r.prototype.on = function(t, s, c) {
+      return p(this, t, s, c, !1);
+    }, r.prototype.once = function(t, s, c) {
+      return p(this, t, s, c, !0);
+    }, r.prototype.removeListener = function(t, s, c, w) {
+      var v = n ? n + t : t;
       if (!this._events[v]) return this;
       if (!s)
         return u(this, v), this;
-      var f = this._events[v];
-      if (f.fn)
-        f.fn === s && (!w || f.once) && (!c || f.context === c) && u(this, v);
+      var l = this._events[v];
+      if (l.fn)
+        l.fn === s && (!w || l.once) && (!c || l.context === c) && u(this, v);
       else {
-        for (var m = 0, a = [], g = f.length; m < g; m++)
-          (f[m].fn !== s || w && !f[m].once || c && f[m].context !== c) && a.push(f[m]);
+        for (var m = 0, a = [], y = l.length; m < y; m++)
+          (l[m].fn !== s || w && !l[m].once || c && l[m].context !== c) && a.push(l[m]);
         a.length ? this._events[v] = a.length === 1 ? a[0] : a : u(this, v);
       }
       return this;
-    }, n.prototype.removeAllListeners = function(e) {
+    }, r.prototype.removeAllListeners = function(t) {
       var s;
-      return e ? (s = r ? r + e : e, this._events[s] && u(this, s)) : (this._events = new i(), this._eventsCount = 0), this;
-    }, n.prototype.off = n.prototype.removeListener, n.prototype.addListener = n.prototype.on, n.prefixed = r, n.EventEmitter = n, o.exports = n;
-  }(D)), D.exports;
+      return t ? (s = n ? n + t : t, this._events[s] && u(this, s)) : (this._events = new f(), this._eventsCount = 0), this;
+    }, r.prototype.off = r.prototype.removeListener, r.prototype.addListener = r.prototype.on, r.prefixed = n, r.EventEmitter = r, o.exports = r;
+  }(C)), C.exports;
 }
-var G = B();
-const J = /* @__PURE__ */ H(G), M = new J(), X = ({
+var K = J();
+const Q = /* @__PURE__ */ A(K), L = new Q(), Z = ({
   handle: o,
-  localUserId: l,
-  offlineTimeout: r = 3e4,
-  getTime: i = () => (/* @__PURE__ */ new Date()).getTime()
+  localUserId: i,
+  offlineTimeout: n = 3e4,
+  getTime: f = () => (/* @__PURE__ */ new Date()).getTime()
 }) => {
-  const [h, p, u] = L({}), [n, t, e] = L({});
-  return y(() => {
+  const [h, p, u] = D({}), [r, e, t] = D({});
+  return g(() => {
     const s = (v) => {
-      const [f, m] = v.message;
-      f !== l && (e.current[f] || M.emit("new_peer", v), p({
+      const [l, m] = v.message;
+      l !== i && (t.current[l] || L.emit("new_peer", v), p({
         ...u.current,
-        [f]: m
-      }), t({
-        ...e.current,
-        [f]: i()
+        [l]: m
+      }), e({
+        ...t.current,
+        [l]: f()
       }));
     }, c = () => {
-      const v = u.current, f = e.current, m = i();
-      for (const a in f)
-        m - f[a] > r && (delete v[a], delete f[a]);
-      p(v), t(f);
+      const v = u.current, l = t.current, m = f();
+      for (const a in l)
+        m - l[a] > n && (delete v[a], delete l[a]);
+      p(v), e(l);
     };
     o.on("ephemeral-message", s);
     const w = setInterval(
       c,
-      r
+      n
     );
     return () => {
       o.removeListener("ephemeral-message", s), clearInterval(w);
     };
-  }, [o, l, r, i]), [h, n];
-}, Y = ({
+  }, [o, i, n, f]), [h, r];
+}, U = ({
   handle: o,
-  userId: l,
-  initialState: r,
-  heartbeatTime: i = 15e3
+  userId: i,
+  initialState: n,
+  heartbeatTime: f = 15e3
 }) => {
-  const [h, p, u] = L(r), n = (t) => {
-    const e = typeof t == "function" ? t(u.current) : t;
-    p(e), o.broadcast([l, e]);
+  const [h, p, u] = D(n), r = (e) => {
+    const t = typeof e == "function" ? e(u.current) : e;
+    p(t), o.broadcast([i, t]);
   };
-  return y(() => {
-    if (!l)
+  return g(() => {
+    if (!i)
       return;
-    const t = () => void o.broadcast([l, u.current]);
-    t();
-    const e = setInterval(t, i);
-    return () => void clearInterval(e);
-  }, [o, l, i]), y(() => {
-    let t;
-    const e = M.on("new_peer", () => {
-      t = setTimeout(
-        () => o.broadcast([l, u.current]),
+    const e = () => void o.broadcast([i, u.current]);
+    e();
+    const t = setInterval(e, f);
+    return () => void clearInterval(t);
+  }, [o, i, f]), g(() => {
+    let e;
+    const t = L.on("new_peer", () => {
+      e = setTimeout(
+        () => o.broadcast([i, u.current]),
         500
         // Wait for the peer to be ready
       );
     });
     return () => {
-      e.off("new_peer"), t && clearTimeout(t);
+      t.off("new_peer"), e && clearTimeout(e);
     };
-  }, [o, l, M]), [h, n];
+  }, [o, i, L]), [h, r];
 };
 export {
-  F as RepoContext,
-  N as useDocHandle,
-  W as useDocHandles,
-  Q as useDocument,
-  V as useDocuments,
-  Y as useLocalAwareness,
-  X as useRemoteAwareness,
+  z as RepoContext,
+  F as useDocHandle,
+  T as useDocHandles,
+  X as useDocument,
+  Y as useDocuments,
+  U as useLocalAwareness,
+  Z as useRemoteAwareness,
   k as useRepo
 };

package/dist/useDocHandles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDocHandles.d.ts","sourceRoot":"","sources":["../src/useDocHandles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAMxE,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,KAAK,YAAY,CAAC,CAAC,IAAI,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAA;AAElE,wBAAgB,aAAa,CAAC,CAAC,EAC7B,GAAG,EAAE,YAAY,EAAE,EACnB,EAAE,QAAgB,EAAE,GAAE,mBAAwB,GAC7C,YAAY,CAAC,CAAC,CAAC,CAqFjB"}
+{"version":3,"file":"useDocHandles.d.ts","sourceRoot":"","sources":["../src/useDocHandles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAOxE,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,KAAK,YAAY,CAAC,CAAC,IAAI,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAA;AAElE,wBAAgB,aAAa,CAAC,CAAC,EAC7B,GAAG,EAAE,YAAY,EAAE,EACnB,EAAE,QAAgB,EAAE,GAAE,mBAAwB,GAC7C,YAAY,CAAC,CAAC,CAAC,CAsFjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automerge/automerge-repo-react-hooks",
-  "version": "2.3.0-alpha.0",
+  "version": "2.3.1",
   "description": "Hooks to access an Automerge Repo from your react app.",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/packages/automerge-repo-react-hooks",
   "author": "Peter van Hardenberg <pvh@pvh.ca>",
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@automerge/automerge": "2.2.8 - 3",
-    "@automerge/automerge-repo": "2.3.0-alpha.0",
+    "@automerge/automerge-repo": "2.3.1",
     "eventemitter3": "^5.0.1",
     "react-usestateref": "^1.0.8"
   },
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4e54d3585f0f8f80fb558cac01ce2652e7cbf985"
+  "gitHead": "b4b18a23f7a2806fd8b259520b5444bea0ed8153"
 }

package/src/helpers/useSet.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react"
+
+export function useSet<T>(items: T[]): Set<T> {
+  const [set, setSet] = useState<Set<T>>(() => {
+    return new Set<T>(items)
+  })
+  useEffect(() => {
+    const newSet = new Set(items)
+    if (identical(set, newSet)) {
+      return
+    }
+    setSet(newSet)
+  }, [set, items])
+  return set
+}
+
+function identical<T>(s1: Set<T>, s2: Set<T>) {
+  return s1.size === s2.size && Array.from(s1).every(v => s2.has(v))
+}

package/src/useDocHandle.ts

@@ -65,7 +65,7 @@ export function useDocHandle<T>(
    * re-running this function until it succeeds, whereas the synchronous
    * form uses a setState to track the value. */
   useEffect(() => {
-    if (suspense || !wrapper) {
+    if (currentHandle || suspense || !wrapper) {
       return
     }
     wrapper.promise
@@ -75,7 +75,7 @@ export function useDocHandle<T>(
       .catch(() => {
         setHandle(undefined)
       })
-  }, [suspense, wrapper])
+  }, [currentHandle, suspense, wrapper])
 
   if (currentHandle || !suspense || !wrapper) {
     return currentHandle

package/src/useDocHandles.ts

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react"
 import { useRepo } from "./useRepo.js"
 import { PromiseWrapper, wrapPromise } from "./wrapPromise.js"
 import { wrapperCache } from "./useDocHandle.js"
+import { useSet } from "./helpers/useSet.js"
 
 interface UseDocHandlesParams {
   suspense?: boolean
@@ -14,12 +15,13 @@ export function useDocHandles<T>(
   ids: AutomergeUrl[],
   { suspense = false }: UseDocHandlesParams = {}
 ): DocHandleMap<T> {
+  const idSet = useSet(ids)
   const repo = useRepo()
   const [handleMap, setHandleMap] = useState<DocHandleMap<T>>(() => {
     const map = new Map()
 
     // Initialize the map with any handles that are ready
-    for (const id of ids) {
+    for (const id of idSet.values()) {
       let progress
       try {
         progress = repo.findWithProgress<T>(id)
@@ -39,7 +41,7 @@ export function useDocHandles<T>(
   const nextHandleMap = new Map<AutomergeUrl, DocHandle<T> | undefined>()
 
   // Check if we need any new wrappers
-  for (const id of ids) {
+  for (const id of idSet.values()) {
     let handle = handleMap.get(id)
     let wrapper = wrapperCache.get(id)
     if (!wrapper) {
@@ -85,7 +87,7 @@ export function useDocHandles<T>(
     } else {
       setHandleMap(nextHandleMap)
     }
-  }, [suspense, ids])
+  }, [suspense, idSet])
 
   // If any promises are pending, suspend with Promise.all
   // Note that this behaviour is different from the synchronous

package/test/helpers/useSet.test.tsx

@@ -0,0 +1,82 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import "@testing-library/jest-dom"
+
+import { describe, expect, it, vi } from "vitest"
+import { useSet } from "../../src/helpers/useSet"
+
+describe("useSet", () => {
+  const Component = ({
+    args,
+    onSet,
+  }: {
+    args: number[]
+    onSet: (result: Set<number>) => void
+  }) => {
+    const result = useSet(args)
+    onSet(result)
+    return null
+  }
+
+  it("builds a Set from the provided arguments", () => {
+    const onSet = vi.fn<(result: Set<number>) => void>()
+
+    const source = [1, 2, 3]
+
+    render(<Component args={source} onSet={onSet} />)
+
+    const result = onSet.mock.lastCall?.at(0)
+    expect(result?.size).toBe(source.length)
+    source.forEach(entry => {
+      expect(result?.has(entry)).toBe(true)
+    })
+  })
+
+  it("collapses duplicates", () => {
+    const onSet = vi.fn<(result: Set<number>) => void>()
+
+    const source = [1, 2, 2, 3]
+
+    render(<Component args={source} onSet={onSet} />)
+
+    const result = onSet.mock.lastCall?.at(0)
+    expect(result?.size).toBe(3)
+    source.forEach(entry => {
+      expect(result?.has(entry)).toBe(true)
+    })
+  })
+
+  it("returns a new Set if the items change", () => {
+    const onSet1 = vi.fn<(result: Set<number>) => void>()
+    const source1 = [1, 2, 3]
+
+    const { rerender } = render(<Component args={source1} onSet={onSet1} />)
+    const result1 = onSet1.mock.lastCall?.at(0)
+
+    const onSet2 = vi.fn<(result: Set<number>) => void>()
+    const source2 = [2, 3, 4]
+    rerender(<Component args={source2} onSet={onSet2} />)
+    const result2 = onSet2.mock.lastCall?.at(0)
+
+    expect(result1).not.toBe(result2)
+    expect(result2?.size).toBe(source2.length)
+    source2.forEach(entry => {
+      expect(result2?.has(entry)).toBe(true)
+    })
+  })
+
+  it("returns the same Set (same object by reference) if the items did not change", () => {
+    const onSet1 = vi.fn<(result: Set<number>) => void>()
+    const source1 = [1, 2, 3]
+
+    const { rerender } = render(<Component args={source1} onSet={onSet1} />)
+    const result1 = onSet1.mock.lastCall?.at(0)
+
+    const onSet2 = vi.fn<(result: Set<number>) => void>()
+    const source2 = [1, 2, 3]
+    rerender(<Component args={source2} onSet={onSet2} />)
+    const result2 = onSet2.mock.lastCall?.at(0)
+
+    expect(result1).toBe(result2)
+  })
+})

package/test/useDocHandle.test.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from "react"
+import React, { act, Suspense } from "react"
 import {
   AutomergeUrl,
   DocHandle,
@@ -11,6 +11,7 @@ import { describe, expect, it, vi } from "vitest"
 import { useDocHandle } from "../src/useDocHandle"
 import { ErrorBoundary } from "react-error-boundary"
 import { setup, setupPairedRepos } from "./testSetup"
+import { pause } from "../src/helpers/DummyNetworkAdapter"
 
 describe("useDocHandle", () => {
   const Component = ({
@@ -135,7 +136,7 @@ describe("useDocHandle", () => {
   })
 
   it("suspends while loading a handle", async () => {
-    const { repoCreator, wrapper } = await setupPairedRepos()
+    const { repoCreator, wrapper } = setupPairedRepos()
     const handleA = repoCreator.create({ foo: "A" })
     const onHandle = vi.fn()
 
@@ -159,7 +160,7 @@ describe("useDocHandle", () => {
   })
 
   it("handles rapid url changes during loading", async () => {
-    const { repoCreator, repoFinder, wrapper } = await setupPairedRepos()
+    const { repoCreator, repoFinder, wrapper } = setupPairedRepos()
     const handleA = repoCreator.create({ foo: "A" })
     const handleB = repoFinder.create({ foo: "B" })
     const onHandle = vi.fn()
@@ -187,9 +188,9 @@ describe("useDocHandle", () => {
     })
   })
 
-  describe("useDocHandle with suspense: false", () => {
+  describe("with suspense: false", () => {
     it("returns undefined while loading then resolves to handle", async () => {
-      const { repoCreator, wrapper } = await setupPairedRepos()
+      const { repoCreator, wrapper } = setupPairedRepos()
       const handleA = repoCreator.create({ foo: "A" })
 
       const onHandle = vi.fn()
@@ -281,5 +282,35 @@ describe("useDocHandle", () => {
       // Then resolve to new handle
       await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleB))
     })
+
+    it("does not re-render unnecessarily when the handle does not change", async () => {
+      const { wrapper, handleA } = setup()
+      const onHandle = vi.fn()
+
+      const NonSuspenseComponent = ({
+        url,
+        onHandle,
+      }: {
+        url: AutomergeUrl
+        onHandle: (handle: DocHandle<unknown> | undefined) => void
+      }) => {
+        const handle = useDocHandle(url, { suspense: false })
+        onHandle(handle)
+        return null
+      }
+
+      // On first render, we should only render once
+      const { rerender } = render(
+        <NonSuspenseComponent url={handleA.url} onHandle={onHandle} />,
+        { wrapper }
+      )
+      await act(pause) // allow time for extra re-renders
+      expect(onHandle).toHaveBeenCalledTimes(1)
+
+      // On explicit second render with no changes, we should render once more
+      rerender(<NonSuspenseComponent url={handleA.url} onHandle={onHandle} />)
+      await act(pause) // allow time for extra re-renders
+      expect(onHandle).toHaveBeenCalledTimes(2)
+    })
   })
 })

package/test/useDocHandles.test.tsx

@@ -0,0 +1,297 @@
+import React, { act, Suspense } from "react"
+import {
+  AutomergeUrl,
+  DocHandle,
+  generateAutomergeUrl,
+} from "@automerge/automerge-repo"
+import { render, screen, waitFor } from "@testing-library/react"
+import "@testing-library/jest-dom"
+
+import { describe, expect, it, vi } from "vitest"
+import { ErrorBoundary } from "react-error-boundary"
+import { setup, setupPairedRepos } from "./testSetup"
+import { useDocHandles } from "../src/useDocHandles"
+import { pause } from "../src/helpers/DummyNetworkAdapter"
+
+describe("useDocHandles", () => {
+  function mockOnHandles() {
+    return vi.fn<
+      (result: Map<AutomergeUrl, DocHandle<unknown> | undefined>) => void
+    >()
+  }
+
+  describe("suspense", () => {
+    const Component = ({
+      urls,
+      onHandles,
+    }: {
+      urls: AutomergeUrl[]
+      onHandles: (
+        handles: Map<AutomergeUrl, DocHandle<unknown> | undefined>
+      ) => void
+    }) => {
+      const handle = useDocHandles(urls, { suspense: true })
+      onHandles(handle)
+      return null
+    }
+
+    it("loads some handles", async () => {
+      const { handleA, handleB, wrapper } = setup()
+      const onHandles = mockOnHandles()
+
+      render(
+        <Suspense fallback={null}>
+          <Component urls={[handleA.url, handleB.url]} onHandles={onHandles} />
+        </Suspense>,
+        { wrapper }
+      )
+
+      const result = onHandles.mock.lastCall?.at(0)
+
+      expect(result?.size).toBe(2)
+      expect(result?.get(handleA.url)?.url).toEqual(handleA.url)
+      expect(result?.get(handleB.url)?.url).toEqual(handleB.url)
+    })
+
+    it("updates the result map when the url changes", async () => {
+      const { wrapper, handleA, handleB } = setup()
+      const onHandles = mockOnHandles()
+
+      const { rerender } = render(
+        <Component urls={[handleA.url]} onHandles={onHandles} />,
+        { wrapper }
+      )
+
+      const result1 = onHandles.mock.lastCall?.at(0)
+      expect(result1?.size).toBe(1)
+      expect(result1?.get(handleA.url)?.url).toEqual(handleA.url)
+
+      rerender(<Component urls={[handleB.url]} onHandles={onHandles} />)
+
+      await act(pause)
+
+      const result2 = onHandles.mock.lastCall?.at(0)
+      expect(result2?.size).toBe(1)
+      expect(result2?.get(handleB.url)?.url).toEqual(handleB.url)
+    })
+
+    it("does not update the result map when the urls do not change", async () => {
+      const { wrapper, handleA, handleB } = setup()
+      const onHandles = mockOnHandles()
+
+      const { rerender } = render(
+        <Component urls={[handleA.url, handleB.url]} onHandles={onHandles} />,
+        { wrapper }
+      )
+
+      const result1 = onHandles.mock.lastCall?.at(0)
+      expect(result1?.size).toBe(2)
+      expect(result1?.get(handleA.url)?.url).toEqual(handleA.url)
+      expect(result1?.get(handleB.url)?.url).toEqual(handleB.url)
+
+      rerender(
+        <Component urls={[handleA.url, handleB.url]} onHandles={onHandles} />
+      )
+
+      await act(pause)
+
+      const result2 = onHandles.mock.lastCall?.at(0)
+      expect(result2).toBe(result1)
+    })
+
+    it("handles unavailable documents correctly", async () => {
+      // suppress console.error from the error boundary
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+
+      const { handleA, wrapper } = setup()
+      const noSuchDocUrl = generateAutomergeUrl()
+
+      render(
+        <ErrorBoundary fallback={<div data-testid="error">Error</div>}>
+          <Suspense fallback={<div data-testid="loading">Loading...</div>}>
+            <Component
+              urls={[noSuchDocUrl, handleA.url]}
+              onHandles={() => {
+                throw new Error("Should not reach here")
+              }}
+            />
+          </Suspense>
+        </ErrorBoundary>,
+        { wrapper }
+      )
+
+      await waitFor(() => {
+        expect(screen.getByTestId("error")).toBeInTheDocument()
+      })
+
+      consoleSpy.mockRestore()
+    })
+
+    it("handles slow network correctly", async () => {
+      const { repoCreator, wrapper } = setupPairedRepos()
+      const handleA = repoCreator.create({ foo: "A" })
+      const onHandles = mockOnHandles()
+
+      render(
+        <ErrorBoundary fallback={<div data-testid="error">Error</div>}>
+          <Suspense fallback={<div data-testid="loading">Loading...</div>}>
+            <Component urls={[handleA.url]} onHandles={onHandles} />
+          </Suspense>
+        </ErrorBoundary>,
+        { wrapper }
+      )
+
+      // Verify loading state is shown initially
+      expect(screen.getByTestId("loading")).toBeInTheDocument()
+      expect(onHandles).not.toHaveBeenCalled()
+
+      // Wait for successful resolution
+      await waitFor(() => {
+        // Loading state should be gone
+        expect(screen.queryByTestId("loading")).not.toBeInTheDocument()
+      })
+
+      const result = onHandles.mock.lastCall?.at(0)
+      expect(result?.size).toBe(1)
+      expect(result?.get(handleA.url)?.url).toEqual(handleA.url)
+
+      // Verify error boundary never rendered
+      expect(screen.queryByTestId("error")).not.toBeInTheDocument()
+    })
+
+    it("suspends while loading a handle", async () => {
+      const { repoCreator, wrapper } = await setupPairedRepos()
+      const handleA = repoCreator.create({ foo: "A" })
+      const onHandles = mockOnHandles()
+
+      render(
+        <Suspense fallback={<div data-testid="loading">Loading...</div>}>
+          <Component urls={[handleA.url]} onHandles={onHandles} />
+        </Suspense>,
+        { wrapper }
+      )
+
+      // Should show loading state
+      expect(screen.getByTestId("loading")).toBeInTheDocument()
+      expect(onHandles).not.toHaveBeenCalled()
+
+      // Should show content
+      await waitFor(() => {
+        expect(onHandles).toHaveBeenCalled()
+      })
+
+      const result = onHandles.mock.lastCall?.at(0)
+      expect(result?.size).toBe(1)
+      expect(result?.get(handleA.url)?.url).toEqual(handleA.url)
+    })
+
+    it("handles rapid url changes during loading", async () => {
+      const { repoCreator, repoFinder, wrapper } = await setupPairedRepos()
+      const handleA = repoCreator.create({ foo: "A" })
+      const handleB = repoFinder.create({ foo: "B" })
+      const onHandles = mockOnHandles()
+
+      const { rerender } = render(
+        <Suspense fallback={<div data-testid="loading">Loading...</div>}>
+          <Component urls={[handleA.url]} onHandles={onHandles} />
+        </Suspense>,
+        { wrapper }
+      )
+
+      // Quickly switch to B before A loads
+      rerender(
+        <Suspense fallback={<div data-testid="loading">Loading...</div>}>
+          <Component urls={[handleB.url]} onHandles={onHandles} />
+        </Suspense>
+      )
+
+      // Should eventually resolve with B, not A
+      await waitFor(() => {
+        expect(onHandles).toHaveBeenCalled()
+      })
+
+      const result = onHandles.mock.lastCall?.at(0)
+      expect(result?.size).toBe(1)
+      expect(result?.get(handleB.url)?.url).toEqual(handleB.url)
+    })
+  })
+
+  describe("useDocHandles with suspense: false", () => {
+    function Component({
+      urls,
+      onHandles,
+    }: {
+      urls: AutomergeUrl[]
+      onHandles: (
+        handles: Map<AutomergeUrl, DocHandle<unknown> | undefined>
+      ) => void
+    }) {
+      const handle = useDocHandles(urls, { suspense: false })
+      onHandles(handle)
+      return null
+    }
+
+    it("returns and empty map while loading then resolves to handle", async () => {
+      const { repoCreator, wrapper } = await setupPairedRepos()
+      const handleA = repoCreator.create({ foo: "A" })
+
+      const onHandles = mockOnHandles()
+
+      render(<Component urls={[handleA.url]} onHandles={onHandles} />, {
+        wrapper,
+      })
+
+      const result1 = onHandles.mock.lastCall?.at(0)
+      expect(result1?.size).toBe(0)
+
+      // Wait for handle to load
+      await waitFor(() => {
+        expect(onHandles).toHaveBeenCalledWith(
+          expect.objectContaining({ size: 1 })
+        )
+      })
+
+      const result2 = onHandles.mock.lastCall?.at(0)
+      expect(result2?.get(handleA.url)?.url).toEqual(handleA.url)
+    })
+
+    it("handles unavailable documents by omitting them", async () => {
+      const { handleA, wrapper } = setup()
+      const noSuchDocUrl = generateAutomergeUrl()
+      const onHandles = mockOnHandles()
+
+      render(
+        <ErrorBoundary fallback={<div data-testid="error">Error</div>}>
+          <Component urls={[handleA.url, noSuchDocUrl]} onHandles={onHandles} />
+        </ErrorBoundary>,
+        { wrapper }
+      )
+
+      const result = onHandles.mock.lastCall?.at(0)
+      expect(result?.size).toBe(1)
+      expect(result?.get(handleA.url)?.url).toEqual(handleA.url)
+    })
+
+    it("updates the handle map when urls change", async () => {
+      const { wrapper, handleA, handleB } = setup()
+      const onHandles = mockOnHandles()
+
+      const { rerender } = render(
+        <Component urls={[handleA.url]} onHandles={onHandles} />,
+        { wrapper }
+      )
+
+      const result1 = onHandles.mock.lastCall?.at(0)
+      expect(result1?.size).toBe(1)
+      expect(result1?.get(handleA.url)?.url).toEqual(handleA.url)
+
+      // Change URL
+      rerender(<Component urls={[handleB.url]} onHandles={onHandles} />)
+      await act(pause)
+
+      const result2 = onHandles.mock.lastCall?.at(0)
+      expect(result2?.size).toBe(1)
+      expect(result2?.get(handleB.url)?.url).toEqual(handleB.url)
+    })
+  })
+})