diff --git a/packages/component/src/components/page-list/view/create-collection.tsx b/packages/component/src/components/page-list/view/create-collection.tsx
index 86e8a596f4..11405e6476 100644
--- a/packages/component/src/components/page-list/view/create-collection.tsx
+++ b/packages/component/src/components/page-list/view/create-collection.tsx
@@ -22,22 +22,15 @@ import {
 import { FilterList } from '../filter';
 import * as styles from './collection-list.css';
 
-type CreateCollectionProps = {
+interface EditCollectionModelProps {
+  init?: Collection;
   title?: string;
-  init: Collection;
-  onConfirm: (collection: Collection) => void;
-  onConfirmText?: string;
+  open: boolean;
   getPageInfo: GetPageInfoById;
   propertiesMeta: PropertiesMeta;
-};
-
-type SaveCollectionButtonProps = {
-  onConfirm: (collection: Collection) => Promise<void>;
-  getPageInfo: GetPageInfoById;
-  propertiesMeta: PropertiesMeta;
-  filterList: Filter[];
-  workspaceId: string;
-};
+  onClose: () => void;
+  onConfirm: (view: Collection) => Promise<void>;
+}
 
 export const EditCollectionModel = ({
   init,
@@ -47,15 +40,7 @@ export const EditCollectionModel = ({
   getPageInfo,
   propertiesMeta,
   title,
-}: {
-  init?: Collection;
-  onConfirm: (view: Collection) => Promise<void>;
-  open: boolean;
-  onClose: () => void;
-  title?: string;
-  getPageInfo: GetPageInfoById;
-  propertiesMeta: PropertiesMeta;
-}) => {
+}: EditCollectionModelProps) => {
   const t = useAFFiNEI18N();
   const onConfirmOnCollection = useCallback(
     (view: Collection) => {
@@ -95,47 +80,46 @@ export const EditCollectionModel = ({
   );
 };
 
-const Page = ({
-  id,
-  onClick,
-  getPageInfo,
-}: {
+interface PageProps {
   id: string;
-  onClick: (id: string) => void;
   getPageInfo: GetPageInfoById;
-}) => {
+  onClick: (id: string) => void;
+}
+
+const Page = ({ id, onClick, getPageInfo }: PageProps) => {
   const page = getPageInfo(id);
-  if (!page) {
-    return null;
-  }
-  const icon = page.isEdgeless ? (
-    <EdgelessIcon
-      style={{
-        width: 17.5,
-        height: 17.5,
-      }}
-    />
-  ) : (
-    <PageIcon
-      style={{
-        width: 17.5,
-        height: 17.5,
-      }}
-    />
-  );
-  const click = () => {
-    onClick(id);
-  };
+  const handleClick = useCallback(() => onClick(id), [id, onClick]);
   return (
-    <div className={styles.pageContainer}>
-      <div className={styles.pageIcon}>{icon}</div>
-      <div className={styles.pageTitle}>{page.title}</div>
-      <div onClick={click} className={styles.deleteIcon}>
-        <RemoveIcon />
-      </div>
-    </div>
+    <>
+      {page ? (
+        <div className={styles.pageContainer}>
+          <div className={styles.pageIcon}>
+            {page.isEdgeless ? (
+              <EdgelessIcon style={{ width: 17.5, height: 17.5 }} />
+            ) : (
+              <PageIcon style={{ width: 17.5, height: 17.5 }} />
+            )}
+          </div>
+          <div className={styles.pageTitle}>{page.title}</div>
+          <div onClick={handleClick} className={styles.deleteIcon}>
+            <RemoveIcon />
+          </div>
+        </div>
+      ) : null}
+    </>
   );
 };
+
+interface EditCollectionProps {
+  title?: string;
+  onConfirmText?: string;
+  init: Collection;
+  getPageInfo: GetPageInfoById;
+  propertiesMeta: PropertiesMeta;
+  onCancel: () => void;
+  onConfirm: (collection: Collection) => void;
+}
+
 export const EditCollection = ({
   title,
   init,
@@ -144,9 +128,7 @@ export const EditCollection = ({
   onConfirmText,
   getPageInfo,
   propertiesMeta,
-}: CreateCollectionProps & {
-  onCancel: () => void;
-}) => {
+}: EditCollectionProps) => {
   const t = useAFFiNEI18N();
   const [value, onChange] = useState<Collection>(init);
   const removeFromExcludeList = useCallback(
@@ -223,13 +205,8 @@ export const EditCollection = ({
           <FilterList
             propertiesMeta={propertiesMeta}
             value={value.filterList}
-            onChange={list =>
-              onChange({
-                ...value,
-                filterList: list,
-              })
-            }
-          ></FilterList>
+            onChange={filterList => onChange({ ...value, filterList })}
+          />
           {value.allowList ? (
             <div className={styles.allowList}>
               <div className={styles.allowTitle}>With follow pages:</div>
@@ -253,12 +230,7 @@ export const EditCollection = ({
             data-testid="input-collection-title"
             placeholder={t['Untitled Collection']()}
             defaultValue={value.name}
-            onChange={text =>
-              onChange({
-                ...value,
-                name: text,
-              })
-            }
+            onChange={name => onChange({ ...value, name })}
           />
         </div>
       </ScrollableContainer>
@@ -288,6 +260,15 @@ export const EditCollection = ({
     </div>
   );
 };
+
+interface SaveCollectionButtonProps {
+  getPageInfo: GetPageInfoById;
+  propertiesMeta: PropertiesMeta;
+  filterList: Filter[];
+  workspaceId: string;
+  onConfirm: (collection: Collection) => Promise<void>;
+}
+
 export const SaveCollectionButton = ({
   onConfirm,
   getPageInfo,
diff --git a/packages/component/src/ui/confirm/confirm.tsx b/packages/component/src/ui/confirm/confirm.tsx
index 5b6342d828..01e4cc0242 100644
--- a/packages/component/src/ui/confirm/confirm.tsx
+++ b/packages/component/src/ui/confirm/confirm.tsx
@@ -1,5 +1,6 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
+import { useCallback, useMemo } from 'react';
 
 import type { ModalProps } from '../modal';
 import { Modal, ModalCloseButton } from '../modal';
@@ -39,33 +40,36 @@ export const Confirm = ({
   confirmButtonTestId = '',
 }: ConfirmProps) => {
   const t = useAFFiNEI18N();
+  const cancelText_ = useMemo<string>(() => {
+    return cancelText === 'Cancel' ? t['Cancel']() : cancelText;
+  }, [cancelText, t]);
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+  }, [onCancel]);
+  const handleConfirm = useCallback(() => {
+    onConfirm?.();
+  }, [onConfirm]);
+
   return (
     <Modal open={open} disablePortal={false}>
       <StyledModalWrapper>
-        <ModalCloseButton
-          onClick={() => {
-            onCancel?.();
-          }}
-        />
+        <ModalCloseButton onClick={handleCancel} />
         <StyledConfirmTitle>{title}</StyledConfirmTitle>
         <StyledConfirmContent>{content}</StyledConfirmContent>
         {buttonDirection === 'row' ? (
           <StyledRowButtonWrapper>
             <Button
-              onClick={() => {
-                onCancel?.();
-              }}
+              onClick={handleCancel}
               size="large"
               style={{ marginRight: '24px' }}
               data-testid={cancelButtonTestId}
             >
-              {cancelText === 'Cancel' ? t['Cancel']() : cancelText}
+              {cancelText_}
             </Button>
             <Button
               type={confirmType}
-              onClick={() => {
-                onConfirm?.();
-              }}
+              onClick={handleConfirm}
               size="large"
               data-testid={confirmButtonTestId}
             >
@@ -76,18 +80,14 @@ export const Confirm = ({
           <StyledColumnButtonWrapper>
             <Button
               type={confirmType}
-              onClick={() => {
-                onConfirm?.();
-              }}
+              onClick={handleConfirm}
               style={{ width: '284px', height: '38px', textAlign: 'center' }}
               data-testid={confirmButtonTestId}
             >
               {confirmText}
             </Button>
             <Button
-              onClick={() => {
-                onCancel?.();
-              }}
+              onClick={handleCancel}
               style={{
                 marginTop: '16px',
                 width: '284px',
@@ -96,7 +96,7 @@ export const Confirm = ({
               }}
               data-testid={cancelButtonTestId}
             >
-              {cancelText === 'Cancel' ? t['Cancel']() : cancelText}
+              {cancelText_}
             </Button>
           </StyledColumnButtonWrapper>
         )}