Add custom equality function to useSelector in useDividerData.

cybersemics · Jan 19, 2025 · 8270579 · 8270579
1 parent 7df6c65
commit 8270579
Showing 1 changed file with 36 additions and 26 deletions.
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
@@ -23,33 +23,43 @@ const useDividerData = (path: Path) => {
   const grandParentPath = parentOf(parentPath)
   const grandParentId = head(grandParentPath)
 
-  return useSelector((state: State) => {
-    const children = parentId ? getAllChildrenAsThoughts(state, parentId) : []
-    const childrenWithoutDividers = children.filter(child => !isDivider(child.value))
-    const isOnlyChild = childrenWithoutDividers.length === 0
-    const isTableView =
-      (parentId && attributeEquals(state, parentId, '=view', 'Table')) ||
-      (grandParentId && attributeEquals(state, grandParentId, '=view', 'Table'))
-
-    let thoughtsAtSameDepth: { id: ThoughtId; value: string }[] = []
-
-    if (isTableView && isOnlyChild && grandParentId) {
-      const parentSiblings = getAllChildrenAsThoughts(state, grandParentId)
-      thoughtsAtSameDepth = parentSiblings.flatMap(parent => {
-        const childrenOfParent = parent.id ? getAllChildrenAsThoughts(state, parent.id) : []
-        return childrenOfParent.filter(child => !isDivider(child.value))
-      })
-    }
+  return useSelector(
+    (state: State) => {
+      const children = parentId ? getAllChildrenAsThoughts(state, parentId) : []
+      const childrenWithoutDividers = children.filter(child => !isDivider(child.value))
+      const isOnlyChild = childrenWithoutDividers.length === 0
+      const isTableView =
+        (parentId && attributeEquals(state, parentId, '=view', 'Table')) ||
+        (grandParentId && attributeEquals(state, grandParentId, '=view', 'Table'))
+
+      let thoughtsAtSameDepth: { id: ThoughtId; value: string }[] = []
+
+      if (isTableView && isOnlyChild && grandParentId) {
+        const parentSiblings = getAllChildrenAsThoughts(state, grandParentId)
+        thoughtsAtSameDepth = parentSiblings.flatMap(parent => {
+          const childrenOfParent = parent.id ? getAllChildrenAsThoughts(state, parent.id) : []
+          return childrenOfParent.filter(child => !isDivider(child.value))
+        })
+      }
 
-    return {
-      dividerId,
-      parentId,
-      isOnlyChild,
-      isTableView,
-      children,
-      thoughtsAtSameDepth,
-    }
-  })
+      return {
+        dividerId,
+        parentId,
+        isOnlyChild,
+        isTableView,
+        children,
+        thoughtsAtSameDepth,
+      }
+    },
+    (prev, next) => {
+      return (
+        prev.dividerId === next.dividerId &&
+        prev.parentId === next.parentId &&
+        prev.isOnlyChild === next.isOnlyChild &&
+        prev.isTableView === next.isTableView
+      )
+    },
+  )
 }
 
 const canvas = document.createElement('canvas')