fix(visual-editing): prevent snapshot overfetching

packages/visual-editing/src/ui/Overlays.tsx

@@ -76,28 +76,35 @@
 const DocumentReporter: FunctionComponent<{
   documentIds: string[]
   perspective: ClientPerspective
 }> = (props) => {
   const {documentIds} = props
-  const actor = useOptimisticActor()
+  const [uniqueIds, setUniqueIds] = useState<string[]>([])
 
-  useEffect((): (() => void) => {
-    return observeDocumentIds(actor, documentIds)
-  }, [actor, documentIds])
+  useEffect(() => {
+    setUniqueIds((prev) => {
+      const next = Array.from(new Set(documentIds))
+      return prev.length === next.length &&
+        prev.reduce((acc, prevId) => acc.filter((id) => id !== prevId), next)?.length === 0
+        ? prev
+        : next
+    })
+  }, [documentIds])
+  const actor = useOptimisticActor()
 
-  return null
-}
-function observeDocumentIds(actor: ReturnType<typeof useOptimisticActor>, documentIds: string[]) {
-  const uniqueIds = Array.from(new Set(documentIds))
-  for (const id of uniqueIds) {
-    actor.send({type: 'observe', documentId: getDraftId(id)})
-    actor.send({type: 'observe', documentId: getPublishedId(id)})
-  }
-  return () => {
+  useEffect(() => {
     for (const id of uniqueIds) {
-      actor.send({type: 'unobserve', documentId: getDraftId(id)})
-      actor.send({type: 'unobserve', documentId: getPublishedId(id)})
+      actor.send({type: 'observe', documentId: getDraftId(id)})
+      actor.send({type: 'observe', documentId: getPublishedId(id)})
     }
-  }
+    return () => {
+      for (const id of uniqueIds) {
+        actor.send({type: 'unobserve', documentId: getDraftId(id)})
+        actor.send({type: 'unobserve', documentId: getPublishedId(id)})
+      }
+    }
+  }, [actor, uniqueIds])
+
+  return null
 }
 
 const OverlaysController: FunctionComponent<{
@@ -323,6 +330,7 @@
   }, [overlayEnabled])
 
   const documentIds = useMemo(() => {
+    console.log('recalc documentIds')
     return elements.flatMap((element) => ('id' in element.sanity ? [element.sanity.id] : []))
   }, [elements])