Merge pull request #6717 from overleaf/ta-ds-deep-compare-memo

Use Deep Comparison for RootFolder Effects

GitOrigin-RevId: fd4dd523f131799eccd5909a7fd42ec7c985ca4e

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],

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
+}