diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index 40c70e34f6..78cf0e1178 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -442,6 +442,10 @@ const Completed: FC<ICompletedProps> = ({
     setFullScreen(!fullScreen)
   }, [fullScreen])
 
+  const toggleCollapsed = useCallback(() => {
+    setIsCollapsed(prev => !prev)
+  }, [])
+
   const viewNewlyAddedChunk = useCallback(async () => {
     const totalPages = segmentListData?.total_pages || 0
     const total = segmentListData?.total || 0
@@ -578,15 +582,16 @@ const Completed: FC<ICompletedProps> = ({
     return selectedStatus ? 1 : 0
   }, [selectedStatus])
 
+  const contextValue = useMemo<SegmentListContextValue>(() => ({
+    isCollapsed,
+    fullScreen,
+    toggleFullScreen,
+    currSegment,
+    currChildChunk,
+  }), [isCollapsed, fullScreen, toggleFullScreen, currSegment, currChildChunk])
+
   return (
-    <SegmentListContext.Provider value={{
-      isCollapsed,
-      fullScreen,
-      toggleFullScreen,
-      currSegment,
-      currChildChunk,
-    }}
-    >
+    <SegmentListContext.Provider value={contextValue}>
       {/* Menu Bar */}
       {!isFullDocMode && (
         <div className={s.docSearchWrapper}>
@@ -618,7 +623,7 @@ const Completed: FC<ICompletedProps> = ({
             onClear={() => handleInputChange('')}
           />
           <Divider type="vertical" className="mx-3 h-3.5" />
-          <DisplayToggle isCollapsed={isCollapsed} toggleCollapsed={() => setIsCollapsed(!isCollapsed)} />
+          <DisplayToggle isCollapsed={isCollapsed} toggleCollapsed={toggleCollapsed} />
         </div>
       )}
       {/* Segment list */}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
index dda2d9bf80..cd329345a1 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import type { SegmentListContextValue } from '..'
 import * as React from 'react'
 import { Markdown } from '@/app/components/base/markdown'
 import { cn } from '@/utils/classnames'
@@ -14,13 +15,15 @@ type ChunkContentProps = {
   className?: string
 }
 
+const selectIsCollapsed = (s: SegmentListContextValue) => s.isCollapsed
+
 const ChunkContent: FC<ChunkContentProps> = ({
   detail,
   isFullDocMode,
   className,
 }) => {
   const { answer, content, sign_content } = detail
-  const isCollapsed = useSegmentListContext(s => s.isCollapsed)
+  const isCollapsed = useSegmentListContext(selectIsCollapsed)
 
   if (answer) {
     return (