Merge pull request #3494 from overleaf/ae-eslint-hooks

Re-enable react-hooks/exhaustive-deps

GitOrigin-RevId: 2a767596d2cfd41b8bfbd3928dc43c266ec7dc0c

services/web/frontend/js/features/file-tree/components/file-tree-root.js

@@ -30,8 +30,7 @@ function FileTreeRoot({
 
   useEffect(() => {
     if (isReady) onInit()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isReady])
+  }, [isReady, onInit])
   if (!isReady) return null
 
   return (

services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js

@@ -81,8 +81,7 @@ export function FileTreeSelectableProvider({
       findInTree(fileTreeData, id)
     )
     onSelect(selectedEntities)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fileTreeData, selectedEntityIds])
+  }, [fileTreeData, selectedEntityIds, onSelect])
 
   useEffect(() => {
     // listen for `editor.openDoc` and selected that doc

services/web/frontend/js/features/outline/components/outline-pane.js

@@ -30,8 +30,7 @@ function OutlinePane({
 
   useEffect(() => {
     onToggle(isOpen)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen])
+  }, [isOpen, onToggle])
 
   const headerClasses = classNames('outline-pane', {
     'outline-pane-disabled': !isTexFile

services/web/frontend/js/shared/hooks/use-expand-collapse.js

@@ -33,8 +33,7 @@ function useExpandCollapse({
         })
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isExpanded])
+  }, [isExpanded, collapsedSize, dimension])
 
   const expandableClasses = classNames(
     'expand-collapse-container',

services/web/frontend/js/shared/hooks/use-resize-observer.js

@@ -1,13 +1,13 @@
-import { useLayoutEffect, useRef } from 'react'
+import { useLayoutEffect, useRef, useCallback } from 'react'
 
 function useResizeObserver(observedElement, observedData, callback) {
   const resizeObserver = useRef()
 
-  function observe() {
+  const observe = useCallback(() => {
     resizeObserver.current = new ResizeObserver(function(elementsObserved) {
       callback(elementsObserved[0])
     })
-  }
+  }, [callback])
 
   function unobserve(observedCurrent) {
     resizeObserver.current.unobserve(observedCurrent)
@@ -30,8 +30,7 @@ function useResizeObserver(observedElement, observedData, callback) {
         }
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [observedElement, observedData])
+  }, [observedElement, observedData, observe])
 }
 
 export default useResizeObserver