fix(core): selectAtom crash on isEqual (#4780)

packages/frontend/component/src/components/page-list/page-group.tsx

@@ -8,7 +8,6 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import clsx from 'clsx';
 import { useAtomValue } from 'jotai';
 import { selectAtom } from 'jotai/utils';
-import { isEqual } from 'lodash-es';
 import { type MouseEventHandler, useCallback, useMemo, useState } from 'react';
 
 import { PagePreview } from './page-content-preview';
@@ -186,15 +185,11 @@ type RequiredProps = Pick<PageListProps, (typeof requiredPropNames)[number]> & {
   selectable: boolean;
 };
 
-const listPropsAtom = selectAtom(
+const listPropsAtom = selectAtom(pageListPropsAtom, props => {
-  pageListPropsAtom,
+  return Object.fromEntries(
-  props => {
+    requiredPropNames.map(name => [name, props[name]])
-    return Object.fromEntries(
+  ) as RequiredProps;
-      requiredPropNames.map(name => [name, props[name]])
+});
-    ) as RequiredProps;
-  },
-  isEqual
-);
 
 const PageMetaListItemRenderer = (pageMeta: PageMeta) => {
   const props = useAtomValue(listPropsAtom);

packages/frontend/component/src/components/page-list/scoped-atoms.ts

@@ -2,7 +2,6 @@ import { DEFAULT_SORT_KEY } from '@affine/env/constant';
 import type { PageMeta } from '@blocksuite/store';
 import { atom } from 'jotai';
 import { selectAtom } from 'jotai/utils';
-import { isEqual } from 'lodash-es';
 
 import { pagesToPageGroups } from './page-group';
 import type { PageListProps, PageMetaRecord } from './types';
@@ -17,18 +16,14 @@ const selectionActiveAtom = atom(false);
 
 export const selectionStateAtom = atom(
   get => {
-    const baseAtom = selectAtom(
+    const baseAtom = selectAtom(pageListPropsAtom, props => {
-      pageListPropsAtom,
+      const { selectable, selectedPageIds, onSelectedPageIdsChange } = props;
-      props => {
+      return {
-        const { selectable, selectedPageIds, onSelectedPageIdsChange } = props;
+        selectable,
-        return {
+        selectedPageIds,
-          selectable,
+        onSelectedPageIdsChange,
-          selectedPageIds,
+      };
-          onSelectedPageIdsChange,
+    });
-        };
-      },
-      isEqual
-    );
     const baseState = get(baseAtom);
     const selectionActive =
       baseState.selectable === 'toggle'
@@ -45,19 +40,15 @@ export const selectionStateAtom = atom(
 );
 
 // get handlers from pageListPropsAtom
-export const pageListHandlersAtom = selectAtom(
+export const pageListHandlersAtom = selectAtom(pageListPropsAtom, props => {
-  pageListPropsAtom,
+  const { onSelectedPageIdsChange, onDragStart, onDragEnd } = props;
-  props => {
-    const { onSelectedPageIdsChange, onDragStart, onDragEnd } = props;
 
-    return {
+  return {
-      onSelectedPageIdsChange,
+    onSelectedPageIdsChange,
-      onDragStart,
+    onDragStart,
-      onDragEnd,
+    onDragEnd,
-    };
+  };
-  },
+});
-  isEqual
-);
 
 export const pagesAtom = selectAtom(pageListPropsAtom, props => props.pages);