diff --git a/src/components/FileExplorer/hooks/useSetupTree.tsx b/src/components/FileExplorer/hooks/useSetupTree.tsx
index 74779f9..2d41fac 100644
--- a/src/components/FileExplorer/hooks/useSetupTree.tsx
+++ b/src/components/FileExplorer/hooks/useSetupTree.tsx
@@ -20,9 +20,9 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
   // Only run when metadata or accessToken changes
   useSequentialEffect(
     useCallback(
-      checker => {
+      shouldAbort => {
         catchNetworkErrors(async () => {
-          if (!checker()) return
+          if (shouldAbort()) return
 
           setStateContext('tree-loading')
           const { userName, repoName, branchName } = metaData
@@ -36,7 +36,7 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
             true,
             accessToken,
           )
-          if (!checker()) return
+          if (shouldAbort()) return
 
           setStateContext('tree-rendering')
 
diff --git a/src/utils/hooks/useSequentialEffect.ts b/src/utils/hooks/useSequentialEffect.ts
index 581fa19..861e5df 100644
--- a/src/utils/hooks/useSequentialEffect.ts
+++ b/src/utils/hooks/useSequentialEffect.ts
@@ -5,15 +5,15 @@ import { useEffect } from 'react'
  * the later effect ends earlier than the previous one, and the previous effect overlaps later effect's result.
  */
 export function useSequentialEffect(
-  effect: (checker: () => boolean) => (() => void | undefined) | void,
+  effect: (shouldAbort: () => boolean) => (() => void | undefined) | void,
 ) {
   useEffect(() => {
-    // The previous effect should stop running when finding checker returning false.
-    let valid = true
-    const checker = () => valid
-    const defect = effect(checker)
+    // The previous effect should stop running if shouldAbort returns true.
+    let end = false
+    const shouldAbort = () => end
+    const defect = effect(shouldAbort)
     return () => {
-      valid = false
+      end = true
       defect?.()
     }
   }, [effect])