@liveblocks/react 1.10.0-beta2 → 1.10.0-beta3

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { detectDupes } from "@liveblocks/core";
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "1.10.0-beta2";
+var PKG_VERSION = "1.10.0-beta3";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -34,7 +34,10 @@ import { useSyncExternalStoreWithSelector as useSyncExternalStoreWithSelector2 }
 import { applyOptimisticUpdates } from "@liveblocks/core";
 function selectedInboxNotifications(state) {
   const result = applyOptimisticUpdates(state);
-  return Object.values(result.inboxNotifications);
+  return Object.values(result.inboxNotifications).sort(
+    // Sort so that the most recent notifications are first
+    (a, b) => b.notifiedAt.getTime() - a.notifiedAt.getTime()
+  );
 }
 
 // src/shared.ts
@@ -151,11 +154,12 @@ function createCommentId() {
 
 // src/comments/lib/select-notification-settings.ts
 import {
-  applyOptimisticUpdates as applyOptimisticUpdates2
+  applyOptimisticUpdates as applyOptimisticUpdates2,
+  nn
 } from "@liveblocks/core";
 function selectNotificationSettings(roomId, state) {
   const { notificationSettings } = applyOptimisticUpdates2(state);
-  return notificationSettings[roomId];
+  return nn(notificationSettings[roomId]);
 }
 
 // src/comments/lib/selected-threads.ts
@@ -167,6 +171,9 @@ function selectedThreads(roomId, state, options) {
   const threads = Object.values(result.threads).filter((thread) => {
     if (thread.roomId !== roomId)
       return false;
+    if (thread.deletedAt !== void 0) {
+      return false;
+    }
     const query = options.query;
     if (!query)
       return true;
@@ -786,15 +793,46 @@ function createRoomContext(client, options) {
   const requestsCache = /* @__PURE__ */ new Map();
   const poller = makePoller(refreshThreadsAndNotifications);
   async function refreshThreadsAndNotifications() {
-    await Promise.allSettled(
-      Array.from(requestsCache.entries()).filter(([_, requestCache]) => requestCache.subscribers > 0).map(async ([_, requestCache]) => {
-        return requestCache.requestFactory().then(
-          (result) => requestCache.onSuccess(result),
-          () => {
-          }
+    const requests = [];
+    client[kInternal].getRoomIds().map((roomId) => {
+      const room = client.getRoom(roomId);
+      if (room === null)
+        return;
+      const notificationSettingsQuery = makeNotificationSettingsQueryKey(
+        room.id
+      );
+      if (requestsCache.has(notificationSettingsQuery)) {
+        requests.push(
+          room.getRoomNotificationSettings().then((settings) => {
+            store.updateRoomInboxNotificationSettings(
+              room.id,
+              settings,
+              notificationSettingsQuery
+            );
+          }).catch(() => {
+          })
         );
-      })
-    );
+      }
+      const lastRequestedAt = room[kInternal].comments.lastRequestedAt;
+      if (lastRequestedAt === null)
+        return;
+      requests.push(
+        room.getThreads({ since: lastRequestedAt }).then((result) => {
+          store.updateThreadsAndNotifications(
+            result.threads,
+            result.inboxNotifications,
+            result.deletedThreads,
+            result.deletedInboxNotifications
+          );
+          const room2 = client.getRoom(roomId);
+          if (room2 === null)
+            return;
+          room2[kInternal].comments.lastRequestedAt = result.meta.requestedAt;
+        }).catch(() => {
+        })
+      );
+    });
+    await Promise.allSettled(requests);
   }
   function incrementQuerySubscribers(queryKey) {
     const requestCache = requestsCache.get(queryKey);
@@ -824,16 +862,14 @@ function createRoomContext(client, options) {
       poller.stop();
     }
   }
-  async function getOrInitRequest(queryKey, requestFactory, onSuccess) {
+  async function getThreadsAndInboxNotifications(room, queryKey, options2) {
     const requestInfo = requestsCache.get(queryKey);
     if (requestInfo !== void 0) {
       return requestInfo.promise;
     }
-    const promise = requestFactory();
+    const promise = room.getThreads(options2);
     requestsCache.set(queryKey, {
       promise,
-      requestFactory,
-      onSuccess,
       subscribers: 0
     });
     store.setQueryState(queryKey, {
@@ -841,37 +877,25 @@ function createRoomContext(client, options) {
     });
     try {
       const result = await promise;
-      onSuccess(result);
-    } catch (er) {
+      store.updateThreadsAndNotifications(
+        result.threads,
+        result.inboxNotifications,
+        result.deletedThreads,
+        result.deletedInboxNotifications,
+        queryKey
+      );
+      const lastRequestedAt = room[kInternal].comments.lastRequestedAt;
+      if (lastRequestedAt === null || lastRequestedAt > result.meta.requestedAt) {
+        room[kInternal].comments.lastRequestedAt = result.meta.requestedAt;
+      }
+    } catch (err) {
       store.setQueryState(queryKey, {
         isLoading: false,
-        error: er
+        error: err
       });
     }
     poller.start(POLLING_INTERVAL);
   }
-  async function getThreadsAndInboxNotifications(room, queryKey, options2) {
-    const roomId = room.id;
-    return getOrInitRequest(
-      queryKey,
-      async () => {
-        const room2 = client.getRoom(roomId);
-        if (room2 === null) {
-          return;
-        }
-        return room2.getThreads(options2);
-      },
-      (result) => {
-        if (result !== void 0) {
-          store.updateThreadsAndNotifications(
-            result.threads,
-            result.inboxNotifications,
-            queryKey
-          );
-        }
-      }
-    );
-  }
   function useThreads(options2 = { query: { metadata: {} } }) {
     const room = useRoom();
     const queryKey = React2.useMemo(
@@ -885,7 +909,8 @@ function createRoomContext(client, options) {
     }, [room, queryKey]);
     const selector = React2.useCallback(
       (state) => {
-        if (state.queries[queryKey] === void 0 || state.queries[queryKey].isLoading) {
+        const query = state.queries[queryKey];
+        if (query === void 0 || query.isLoading) {
           return {
             isLoading: true
           };
@@ -893,7 +918,7 @@ function createRoomContext(client, options) {
         return {
           threads: selectedThreads(room.id, state, options2),
           isLoading: false,
-          error: state.queries[queryKey].error
+          error: query.error
         };
       },
       [room, queryKey]
@@ -934,7 +959,7 @@ function createRoomContext(client, options) {
       return () => {
         decrementQuerySubscribers(queryKey);
       };
-    }, [room, queryKey]);
+    }, [queryKey]);
     return useSyncExternalStoreWithSelector(
       store.subscribe,
       store.get,
@@ -1023,22 +1048,33 @@ function createRoomContext(client, options) {
         });
         room.editThreadMetadata({ metadata, threadId }).then(
           (metadata2) => {
-            store.set((state) => ({
-              ...state,
-              threads: {
-                ...state.threads,
-                [threadId]: {
-                  ...state.threads[threadId],
-                  metadata: {
-                    ...state.threads[threadId].metadata,
-                    ...metadata2
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: state.optimisticUpdates.filter(
+                    (update) => update.id !== optimisticUpdateId
+                  )
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: {
+                    ...existingThread,
+                    metadata: {
+                      ...existingThread.metadata,
+                      ...metadata2
+                    }
                   }
-                }
-              },
-              optimisticUpdates: state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              )
-            }));
+                },
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1072,41 +1108,52 @@ function createRoomContext(client, options) {
         });
         room.addReaction({ threadId, commentId, emoji }).then(
           (addedReaction) => {
-            store.set((state) => ({
-              ...state,
-              threads: {
-                ...state.threads,
-                [threadId]: {
-                  ...state.threads[threadId],
-                  comments: state.threads[threadId].comments.map(
-                    (comment) => comment.id === commentId ? {
-                      ...comment,
-                      reactions: comment.reactions.some(
-                        (reaction) => reaction.emoji === addedReaction.emoji
-                      ) ? comment.reactions.map(
-                        (reaction) => reaction.emoji === addedReaction.emoji ? {
-                          ...reaction,
-                          users: [
-                            ...reaction.users,
-                            { id: addedReaction.userId }
-                          ]
-                        } : reaction
-                      ) : [
-                        ...comment.reactions,
-                        {
-                          emoji: addedReaction.emoji,
-                          createdAt: addedReaction.createdAt,
-                          users: [{ id: addedReaction.userId }]
-                        }
-                      ]
-                    } : comment
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: state.optimisticUpdates.filter(
+                    (update) => update.id !== optimisticUpdateId
                   )
-                }
-              },
-              optimisticUpdates: state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              )
-            }));
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: {
+                    ...existingThread,
+                    comments: existingThread.comments.map(
+                      (comment) => comment.id === commentId ? {
+                        ...comment,
+                        reactions: comment.reactions.some(
+                          (reaction) => reaction.emoji === addedReaction.emoji
+                        ) ? comment.reactions.map(
+                          (reaction) => reaction.emoji === addedReaction.emoji ? {
+                            ...reaction,
+                            users: [
+                              ...reaction.users,
+                              { id: addedReaction.userId }
+                            ]
+                          } : reaction
+                        ) : [
+                          ...comment.reactions,
+                          {
+                            emoji: addedReaction.emoji,
+                            createdAt: addedReaction.createdAt,
+                            users: [{ id: addedReaction.userId }]
+                          }
+                        ]
+                      } : comment
+                    )
+                  }
+                },
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1139,46 +1186,65 @@ function createRoomContext(client, options) {
         });
         room.removeReaction({ threadId, commentId, emoji }).then(
           () => {
-            store.set((state) => ({
-              ...state,
-              threads: {
-                ...state.threads,
-                [threadId]: {
-                  ...state.threads[threadId],
-                  comments: state.threads[threadId].comments.map((comment) => {
-                    if (comment.id !== commentId) {
-                      return comment;
-                    }
-                    const reactionIndex = comment.reactions.findIndex(
-                      (reaction) => reaction.emoji === emoji
-                    );
-                    let reactions = comment.reactions;
-                    if (reactionIndex >= 0 && comment.reactions[reactionIndex].users.some(
-                      (user) => user.id === userId
-                    )) {
-                      if (comment.reactions[reactionIndex].users.length <= 1) {
-                        reactions = [...comment.reactions];
-                        reactions.splice(reactionIndex, 1);
-                      } else {
-                        reactions[reactionIndex] = {
-                          ...reactions[reactionIndex],
-                          users: reactions[reactionIndex].users.filter(
-                            (user) => user.id !== userId
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: state.optimisticUpdates.filter(
+                    (update) => update.id !== optimisticUpdateId
+                  )
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: {
+                    ...existingThread,
+                    comments: existingThread.comments.map((comment) => {
+                      if (comment.id !== commentId) {
+                        return comment;
+                      }
+                      const existingReaction = comment.reactions.find(
+                        (reaction) => reaction.emoji === emoji
+                      );
+                      if (existingReaction === void 0) {
+                        return comment;
+                      }
+                      const reactions = comment.reactions;
+                      if (!existingReaction.users.some(
+                        (user) => user.id === userId
+                      )) {
+                        return comment;
+                      }
+                      if (existingReaction.users.length <= 1) {
+                        return {
+                          ...comment,
+                          reactions: reactions.filter(
+                            (reaction) => reaction.emoji !== emoji
                           )
                         };
                       }
-                    }
-                    return {
-                      ...comment,
-                      reactions
-                    };
-                  })
-                }
-              },
-              optimisticUpdates: state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              )
-            }));
+                      return {
+                        ...comment,
+                        reactions: reactions.map(
+                          (reaction) => reaction.emoji !== emoji ? reaction : {
+                            ...reaction,
+                            users: reaction.users.filter(
+                              (user) => user.id !== userId
+                            )
+                          }
+                        )
+                      };
+                    })
+                  }
+                },
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1309,32 +1375,40 @@ function createRoomContext(client, options) {
         });
         room.deleteComment({ threadId, commentId }).then(
           () => {
-            const newThreads = { ...store.get().threads };
-            const thread = newThreads[threadId];
-            if (thread === void 0)
-              return;
-            newThreads[thread.id] = {
-              ...thread,
-              comments: thread.comments.map(
-                (comment) => comment.id === commentId ? {
-                  ...comment,
-                  deletedAt: now,
-                  body: void 0
-                } : comment
-              )
-            };
-            if (!newThreads[thread.id].comments.some(
-              (comment) => comment.deletedAt === void 0
-            )) {
-              delete newThreads[thread.id];
-            }
-            store.set((state) => ({
-              ...state,
-              threads: newThreads,
-              optimisticUpdates: state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              )
-            }));
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: state.optimisticUpdates.filter(
+                    (update) => update.id !== optimisticUpdateId
+                  )
+                };
+              }
+              const newThread = {
+                ...existingThread,
+                comments: existingThread.comments.map(
+                  (comment) => comment.id === commentId ? {
+                    ...comment,
+                    deletedAt: now,
+                    body: void 0
+                  } : comment
+                )
+              };
+              const newThreads = { ...state.threads, [threadId]: newThread };
+              if (!newThread.comments.some(
+                (comment) => comment.deletedAt === void 0
+              )) {
+                delete newThreads[threadId];
+              }
+              return {
+                ...state,
+                threads: newThreads,
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1402,10 +1476,7 @@ function createRoomContext(client, options) {
     return mentionSuggestions;
   }
   function useThreadSubscription(threadId) {
-    return useSyncExternalStoreWithSelector(
-      store.subscribe,
-      store.get,
-      store.get,
+    const selector = React2.useCallback(
       (state) => {
         const inboxNotification = selectedInboxNotifications(state).find(
           (inboxNotification2) => inboxNotification2.threadId === threadId
@@ -1420,7 +1491,14 @@ function createRoomContext(client, options) {
           status: "subscribed",
           unreadSince: inboxNotification.readAt
         };
-      }
+      },
+      [threadId]
+    );
+    return useSyncExternalStoreWithSelector(
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
     );
   }
   function useMarkThreadAsRead() {
@@ -1471,34 +1549,28 @@ function createRoomContext(client, options) {
     return `${roomId}:NOTIFICATION_SETTINGS`;
   }
   async function getInboxNotificationSettings(room, queryKey) {
-    const roomId = room.id;
-    return getOrInitRequest(
-      queryKey,
-      async () => {
-        const room2 = client.getRoom(roomId);
-        if (room2 === null) {
-          return;
-        }
-        return room2.getRoomNotificationSettings();
-      },
-      (settings) => {
-        if (settings !== void 0) {
-          store.set((state) => ({
-            ...state,
-            notificationSettings: {
-              ...state.notificationSettings,
-              [room.id]: settings
-            },
-            queries: {
-              ...state.queries,
-              [queryKey]: {
-                isLoading: false
-              }
-            }
-          }));
-        }
-      }
-    );
+    const requestInfo = requestsCache.get(queryKey);
+    if (requestInfo !== void 0) {
+      return requestInfo.promise;
+    }
+    const promise = room.getRoomNotificationSettings();
+    requestsCache.set(queryKey, {
+      promise,
+      subscribers: 0
+    });
+    store.setQueryState(queryKey, {
+      isLoading: true
+    });
+    try {
+      const settings = await promise;
+      store.updateRoomInboxNotificationSettings(room.id, settings, queryKey);
+    } catch (err) {
+      store.setQueryState(queryKey, {
+        isLoading: false,
+        error: err
+      });
+    }
+    poller.start(POLLING_INTERVAL);
   }
   function useRoomNotificationSettings() {
     const room = useRoom();
@@ -1509,27 +1581,31 @@ function createRoomContext(client, options) {
       return () => decrementQuerySubscribers(queryKey);
     }, [room]);
     const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
-    return [
-      useSyncExternalStoreWithSelector(
-        store.subscribe,
-        store.get,
-        store.get,
-        (state) => {
-          const query = state.queries[makeNotificationSettingsQueryKey(room.id)];
-          if (query === void 0 || query.isLoading) {
-            return { isLoading: true };
-          }
-          if (query.error !== void 0) {
-            return { isLoading: false, error: query.error };
-          }
-          return {
-            isLoading: false,
-            settings: selectNotificationSettings(room.id, state)
-          };
+    const selector = React2.useCallback(
+      (state) => {
+        const query = state.queries[makeNotificationSettingsQueryKey(room.id)];
+        if (query === void 0 || query.isLoading) {
+          return { isLoading: true };
         }
-      ),
-      updateRoomNotificationSettings
-    ];
+        if (query.error !== void 0) {
+          return { isLoading: false, error: query.error };
+        }
+        return {
+          isLoading: false,
+          settings: selectNotificationSettings(room.id, state)
+        };
+      },
+      [room]
+    );
+    const settings = useSyncExternalStoreWithSelector(
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
+    );
+    return React2.useMemo(() => {
+      return [settings, updateRoomNotificationSettings];
+    }, [settings, updateRoomNotificationSettings]);
   }
   function useRoomNotificationSettingsSuspense() {
     const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
@@ -1547,20 +1623,24 @@ function createRoomContext(client, options) {
       incrementQuerySubscribers(queryKey2);
       return () => decrementQuerySubscribers(queryKey2);
     }, [room]);
-    return [
-      useSyncExternalStoreWithSelector(
-        store.subscribe,
-        store.get,
-        store.get,
-        (state) => {
-          return {
-            isLoading: false,
-            settings: selectNotificationSettings(room.id, state)
-          };
-        }
-      ),
-      updateRoomNotificationSettings
-    ];
+    const selector = React2.useCallback(
+      (state) => {
+        return {
+          isLoading: false,
+          settings: selectNotificationSettings(room.id, state)
+        };
+      },
+      [room]
+    );
+    const settings = useSyncExternalStoreWithSelector(
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
+    );
+    return React2.useMemo(() => {
+      return [settings, updateRoomNotificationSettings];
+    }, [settings, updateRoomNotificationSettings]);
   }
   function useUpdateRoomNotificationSettings() {
     const room = useRoom();
@@ -1799,13 +1879,13 @@ function createSharedContext(client) {
     );
     const roomInfoState = getRoomInfoState();
     if (!roomInfoState || roomInfoState.isLoading) {
-      throw usersStore.get(roomId);
+      throw roomsInfoStore.get(roomId);
     }
     if (roomInfoState.error) {
       throw roomInfoState.error;
     }
     const state = useSyncExternalStore2(
-      usersStore.subscribe,
+      roomsInfoStore.subscribe,
       getRoomInfoState,
       getRoomInfoState
     );
@@ -1834,6 +1914,8 @@ function useLiveblocksContextBundle() {
   }
   return bundle;
 }
+var POLLING_INTERVAL2 = 60 * 1e3;
+var INBOX_NOTIFICATIONS_QUERY = "INBOX_NOTIFICATIONS";
 function createLiveblocksContext(client) {
   const shared = createSharedContext(client);
   const store = client[kInternal3].cacheStore;
@@ -1848,15 +1930,17 @@ function createLiveblocksContext(client) {
   }
   let fetchInboxNotificationsRequest = null;
   let inboxNotificationsSubscribers = 0;
-  const INBOX_NOTIFICATIONS_QUERY = "INBOX_NOTIFICATIONS";
-  const POLLING_INTERVAL2 = 60 * 1e3;
+  let lastRequestedAt;
   const poller = makePoller2(refreshThreadsAndNotifications);
   function refreshThreadsAndNotifications() {
-    return client.getInboxNotifications().then(
-      ({ threads, inboxNotifications }) => {
+    return client.getInboxNotifications({ since: lastRequestedAt }).then(
+      (result) => {
+        lastRequestedAt = result.meta.requestedAt;
         store.updateThreadsAndNotifications(
-          threads,
-          inboxNotifications,
+          result.threads,
+          result.inboxNotifications,
+          result.deletedThreads,
+          result.deletedInboxNotifications,
           INBOX_NOTIFICATIONS_QUERY
         );
       },
@@ -1889,12 +1973,17 @@ function createLiveblocksContext(client) {
     });
     try {
       fetchInboxNotificationsRequest = client.getInboxNotifications();
-      const { inboxNotifications, threads } = await fetchInboxNotificationsRequest;
+      const result = await fetchInboxNotificationsRequest;
       store.updateThreadsAndNotifications(
-        threads,
-        inboxNotifications,
+        result.threads,
+        result.inboxNotifications,
+        result.deletedThreads,
+        result.deletedInboxNotifications,
         INBOX_NOTIFICATIONS_QUERY
       );
+      if (lastRequestedAt === void 0 || lastRequestedAt > result.meta.requestedAt) {
+        lastRequestedAt = result.meta.requestedAt;
+      }
     } catch (er) {
       store.setQueryState(INBOX_NOTIFICATIONS_QUERY, {
         isLoading: false,
@@ -1903,39 +1992,47 @@ function createLiveblocksContext(client) {
     }
     return;
   }
+  function useInboxNotificationsSelectorCallback(state) {
+    const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
+      return {
+        isLoading: true
+      };
+    }
+    if (query.error !== void 0) {
+      return {
+        error: query.error,
+        isLoading: false
+      };
+    }
+    return {
+      inboxNotifications: selectedInboxNotifications(state),
+      isLoading: false
+    };
+  }
   function useInboxNotifications() {
     useEffect5(() => {
       void fetchInboxNotifications();
       incrementInboxNotificationsSubscribers();
       return () => decrementInboxNotificationsSubscribers();
-    });
+    }, []);
     const result = useSyncExternalStoreWithSelector2(
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
-        if (query === void 0 || query.isLoading) {
-          return {
-            isLoading: true
-          };
-        }
-        if (query.error !== void 0) {
-          return {
-            error: query.error,
-            isLoading: false
-          };
-        }
-        return {
-          inboxNotifications: selectedInboxNotifications(state),
-          isLoading: false
-        };
-      }
+      useInboxNotificationsSelectorCallback
     );
     return result;
   }
+  function useInboxNotificationsSuspenseSelector(state) {
+    return {
+      inboxNotifications: selectedInboxNotifications(state),
+      isLoading: false
+    };
+  }
   function useInboxNotificationsSuspense() {
-    if (store.get().queries[INBOX_NOTIFICATIONS_QUERY] === void 0 || store.get().queries[INBOX_NOTIFICATIONS_QUERY].isLoading) {
+    const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
       throw fetchInboxNotifications();
     }
     React3.useEffect(() => {
@@ -1948,12 +2045,7 @@ function createLiveblocksContext(client) {
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        return {
-          inboxNotifications: selectedInboxNotifications(state),
-          isLoading: false
-        };
-      }
+      useInboxNotificationsSuspenseSelector
     );
   }
   function selectUnreadInboxNotificationsCount(state) {
@@ -1965,38 +2057,46 @@ function createLiveblocksContext(client) {
     }
     return count;
   }
+  function useUnreadInboxNotificationsCountSelector(state) {
+    const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
+      return {
+        isLoading: true
+      };
+    }
+    if (query.error !== void 0) {
+      return {
+        error: query.error,
+        isLoading: false
+      };
+    }
+    return {
+      isLoading: false,
+      count: selectUnreadInboxNotificationsCount(state)
+    };
+  }
   function useUnreadInboxNotificationsCount() {
     useEffect5(() => {
       void fetchInboxNotifications();
       incrementInboxNotificationsSubscribers();
       return () => decrementInboxNotificationsSubscribers();
-    });
+    }, []);
     return useSyncExternalStoreWithSelector2(
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
-        if (query === void 0 || query.isLoading) {
-          return {
-            isLoading: true
-          };
-        }
-        if (query.error !== void 0) {
-          return {
-            error: query.error,
-            isLoading: false
-          };
-        }
-        return {
-          isLoading: false,
-          count: selectUnreadInboxNotificationsCount(state)
-        };
-      }
+      useUnreadInboxNotificationsCountSelector
     );
   }
+  function useUnreadInboxNotificationsCountSuspenseSelector(state) {
+    return {
+      isLoading: false,
+      count: selectUnreadInboxNotificationsCount(state)
+    };
+  }
   function useUnreadInboxNotificationsCountSuspense() {
-    if (store.get().queries[INBOX_NOTIFICATIONS_QUERY] === void 0 || store.get().queries[INBOX_NOTIFICATIONS_QUERY].isLoading) {
+    const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
       throw fetchInboxNotifications();
     }
     React3.useEffect(() => {
@@ -2009,12 +2109,7 @@ function createLiveblocksContext(client) {
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        return {
-          isLoading: false,
-          count: selectUnreadInboxNotificationsCount(state)
-        };
-      }
+      useUnreadInboxNotificationsCountSuspenseSelector
     );
   }
   function useMarkInboxNotificationAsRead() {
@@ -2029,20 +2124,30 @@ function createLiveblocksContext(client) {
       });
       client.markInboxNotificationAsRead(inboxNotificationId).then(
         () => {
-          store.set((state) => ({
-            ...state,
-            inboxNotifications: {
-              ...state.inboxNotifications,
-              [inboxNotificationId]: {
-                // TODO: Handle potential deleted inbox notification
-                ...state.inboxNotifications[inboxNotificationId],
-                readAt
-              }
-            },
-            optimisticUpdates: state.optimisticUpdates.filter(
-              (update) => update.id !== optimisticUpdateId
-            )
-          }));
+          store.set((state) => {
+            const existingNotification = state.inboxNotifications[inboxNotificationId];
+            if (existingNotification === void 0) {
+              return {
+                ...state,
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            }
+            return {
+              ...state,
+              inboxNotifications: {
+                ...state.inboxNotifications,
+                [inboxNotificationId]: {
+                  ...existingNotification,
+                  readAt
+                }
+              },
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            };
+          });
         },
         () => {
           store.set((state) => ({
@@ -2093,10 +2198,7 @@ function createLiveblocksContext(client) {
     }, []);
   }
   function useThreadFromCache(threadId) {
-    return useSyncExternalStoreWithSelector2(
-      store.subscribe,
-      store.get,
-      store.get,
+    const selector = useCallback3(
       (state) => {
         const thread = state.threads[threadId];
         if (thread === void 0) {
@@ -2105,7 +2207,14 @@ function createLiveblocksContext(client) {
           );
         }
         return thread;
-      }
+      },
+      [threadId]
+    );
+    return useSyncExternalStoreWithSelector2(
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
     );
   }
   const currentUserIdStore = client[kInternal3].currentUserIdStore;