diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index bb844e35a4..48e97f0d59 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -126,17 +126,13 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
     return status
   }
 
-  const [isStopQuery, setIsStopQuery] = useState(false)
-  const isStopQueryRef = useRef(isStopQuery)
-  useEffect(() => {
-    isStopQueryRef.current = isStopQuery
-  }, [isStopQuery])
-  const stopQueryStatus = () => {
-    setIsStopQuery(true)
-  }
+  const isStopQuery = useRef(false)
+  const stopQueryStatus = useCallback(() => {
+    isStopQuery.current = true
+  }, [])
 
-  const startQueryStatus = async () => {
-    if (isStopQueryRef.current)
+  const startQueryStatus = useCallback(async () => {
+    if (isStopQuery.current)
       return
 
     try {
@@ -146,6 +142,7 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
         detailUpdate()
         return
       }
+
       await sleep(2500)
       await startQueryStatus()
     }
@@ -153,16 +150,15 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
       await sleep(2500)
       await startQueryStatus()
     }
-  }
+  }, [stopQueryStatus])
 
   useEffect(() => {
-    setIsStopQuery(false)
+    isStopQuery.current = false
     startQueryStatus()
     return () => {
       stopQueryStatus()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [startQueryStatus, stopQueryStatus])
 
   const { data: indexingEstimateDetail, error: indexingEstimateErr } = useSWR({
     action: 'fetchIndexingEstimate',