diff --git a/services/web/frontend/js/shared/context/file-tree-data-context.js b/services/web/frontend/js/shared/context/file-tree-data-context.js
index 27b9dfc9a5..387605c01f 100644
--- a/services/web/frontend/js/shared/context/file-tree-data-context.js
+++ b/services/web/frontend/js/shared/context/file-tree-data-context.js
@@ -3,7 +3,6 @@ import {
   useCallback,
   useReducer,
   useContext,
-  useEffect,
   useMemo,
 } from 'react'
 import PropTypes from 'prop-types'
@@ -15,6 +14,7 @@ import {
   createEntityInTree,
 } from '../../features/file-tree/util/mutate-in-tree'
 import { countFiles } from '../../features/file-tree/util/count-in-tree'
+import useDeepCompareEffect from '../../shared/hooks/use-deep-compare-effect'
 
 const FileTreeDataContext = createContext()
 
@@ -144,7 +144,7 @@ export function FileTreeDataProvider({ children }) {
     initialState
   )
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     dispatch({
       type: ACTION_TYPES.RESET,
       fileTreeData: rootFolder?.[0],
diff --git a/services/web/frontend/js/shared/hooks/use-deep-compare-effect.js b/services/web/frontend/js/shared/hooks/use-deep-compare-effect.js
new file mode 100644
index 0000000000..6b0c6773db
--- /dev/null
+++ b/services/web/frontend/js/shared/hooks/use-deep-compare-effect.js
@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react'
+import _ from 'lodash'
+
+export default function useDeepCompareEffect(callback, dependencies) {
+  const ref = useRef()
+  return useEffect(() => {
+    if (_.isEqual(dependencies, ref.current)) {
+      return
+    }
+    ref.current = dependencies
+    callback()
+  }, dependencies) // eslint-disable-line react-hooks/exhaustive-deps
+}