Fix new comments navigator duplicate counts (#2607)

* fix: navigator dedupes by item.id instead of ref comparisons

* fix: update comment count on comment unmount and on invalid refs being passed

Author: Soxasora

components/comment.js

@@ -187,6 +187,10 @@ export default function Comment ({
     }
 
     navigator.trackNewComment(ref, itemCreatedAt)
+
+    return () => {
+      navigator.untrackNewComment(ref, { includeDescendants: true })
+    }
   }, [item.id, root.lastCommentAt, root.meCommentsViewedAt])
 
   const bottomedOut = depth === COMMENT_DEPTH_LIMIT || (item.comments?.comments.length === 0 && item.nDirectComments > 0)

components/use-comments-navigator.js

@@ -41,6 +41,10 @@ export function useCommentsNavigator () {
     // prevent multiple updates in the same frame
     frameRef.current = true
     window.requestAnimationFrame(() => {
+      // filter out disconnected refs before counting
+      commentRefs.current = commentRefs.current.filter(item =>
+        item.ref?.current?.isConnected
+      )
       const next = commentRefs.current.length
       // transition to the new comment count
       startTransition?.(() => setCommentCount(next))
@@ -93,7 +97,11 @@ export function useCommentsNavigator () {
     const { includeDescendants = false, clearOutline = false } = options
 
     const refNode = commentRef.current
-    if (!refNode) return
+    if (!refNode) {
+      // update the comment count, the ref may be disconnected
+      throttleCountUpdate()
+      return
+    }
 
     const toRemove = commentRefs.current.filter(item => {
       const node = item?.ref?.current
@@ -117,8 +125,8 @@ export function useCommentsNavigator () {
 
     if (toRemove.length) {
       commentRefs.current = commentRefs.current.filter(item => !toRemove.includes(item))
-      throttleCountUpdate()
     }
+    throttleCountUpdate()
   }, [throttleCountUpdate])
 
   // scroll to the next new comment
@@ -128,7 +136,11 @@ export function useCommentsNavigator () {
 
     const ref = list[0]?.ref
     const node = ref?.current
-    if (!node) return
+    if (!node) {
+      // update the comment count, the ref may be disconnected
+      throttleCountUpdate()
+      return
+    }
 
     // smoothly scroll to the start of the comment
     node.scrollIntoView({ behavior: 'smooth', block: 'start' })
@@ -148,7 +160,7 @@ export function useCommentsNavigator () {
 
     // if we reached the end, reset the navigator
     if (list.length === 1) clearCommentRefs()
-  }, [clearCommentRefs, untrackNewComment])
+  }, [clearCommentRefs, untrackNewComment, throttleCountUpdate])
 
   // create the navigator object once
   if (!navigatorRef.current) {