From 3710d34f2fbcfeb6bd6ef844e469188ba6a39cf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Alby?= <timothee.alby@gmail.com>
Date: Tue, 15 Feb 2022 14:37:23 +0100
Subject: [PATCH] Merge pull request #6717 from
 overleaf/ta-ds-deep-compare-memo

Use Deep Comparison for RootFolder Effects

GitOrigin-RevId: fd4dd523f131799eccd5909a7fd42ec7c985ca4e
---
 .../js/shared/context/file-tree-data-context.js     |  4 ++--
 .../js/shared/hooks/use-deep-compare-effect.js      | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 services/web/frontend/js/shared/hooks/use-deep-compare-effect.js

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