diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-root.js b/services/web/frontend/js/features/file-tree/components/file-tree-root.js
index 4e506881e7..e68eab5d5a 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-root.js
+++ b/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 (
diff --git a/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js b/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js
index 7c27376ab5..9da9c1ef64 100644
--- a/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js
+++ b/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
diff --git a/services/web/frontend/js/features/outline/components/outline-pane.js b/services/web/frontend/js/features/outline/components/outline-pane.js
index 1ab184e173..741edd2e7b 100644
--- a/services/web/frontend/js/features/outline/components/outline-pane.js
+++ b/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
diff --git a/services/web/frontend/js/shared/hooks/use-expand-collapse.js b/services/web/frontend/js/shared/hooks/use-expand-collapse.js
index 6e43515ab0..5eb9030ac8 100644
--- a/services/web/frontend/js/shared/hooks/use-expand-collapse.js
+++ b/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',
diff --git a/services/web/frontend/js/shared/hooks/use-resize-observer.js b/services/web/frontend/js/shared/hooks/use-resize-observer.js
index b4b83c9d04..202fa37423 100644
--- a/services/web/frontend/js/shared/hooks/use-resize-observer.js
+++ b/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