chore: enable react-hooks/exhaustive-deps lint rule (#7955)

* chore: setting lint rule to error

* fix: what is happening locally

* chore: adding disable lines from script, removed duplicate lines

* Update snapshots

* fix: what is actually happening, I think my editor is caching this file aggressively

* Update snapshots

* fix: updating with latest main since my large PR merged in before this.

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: nadr0

.eslintrc.json

@@ -111,7 +111,7 @@
     ],
     "no-warning-comments": ["error",{"terms":["Menu.setApplicationMenu(null)"]}],
     "semi": ["error", "never"],
-    "react-hooks/exhaustive-deps": "off",
+    "react-hooks/exhaustive-deps": "error",
     "suggest-no-throw/suggest-no-throw": "error"
   },
   "overrides": [

src/App.tsx

@@ -150,6 +150,7 @@ export function App() {
       // Stop is more serious than Pause
       engineStreamActor.send({ type: EngineStreamTransition.Stop })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [])
 
   // Show a custom toast to users if they haven't done the onboarding
@@ -179,6 +180,7 @@ export function App() {
         }
       )
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [settings.app.onboardingStatus])
 
   useEffect(() => {
@@ -214,6 +216,7 @@ export function App() {
         }
       )
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [])
 
   useEffect(() => {
@@ -233,6 +236,7 @@ export function App() {
         }
       )
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [kclManager.wasmInitFailed])
 
   // Only create the native file menus on desktop

src/Router.tsx

@@ -173,6 +173,7 @@ function CoreDump() {
         rustContext,
         token
       ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
     []
   )
   useHotkeyWrapper(['mod + shift + period'], () => {

src/Toolbar.tsx

@@ -58,6 +58,7 @@ export function Toolbar({
       kclManager.artifactGraph,
       context.selectionRanges
     )
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [kclManager.artifactGraph, context.selectionRanges])
 
   const toolbarButtonsRef = useRef<HTMLUListElement>(null)
@@ -90,11 +91,13 @@ export function Toolbar({
       sketchPathId,
       editorHasFocus: editorManager.getEditorView()?.hasFocus,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
     [
       state,
       send,
       commandBarActor.send,
       sketchPathId,
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
       editorManager.getEditorView()?.hasFocus,
     ]
   )
@@ -189,6 +192,7 @@ export function Toolbar({
         status: maybeIconConfig.status,
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [currentMode, disableAllButtons, configCallbackProps])
 
   // To remember the last selected item in an ActionButtonDropdown

src/clientSideScene/ClientSideSceneComp.tsx

@@ -129,6 +129,7 @@ export const ClientSideScene = ({
       )
       sceneEntitiesManager.tearDownSketch({ removeAxis: true })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [])
 
   let cursor = 'default'
@@ -498,6 +499,7 @@ const ConstraintSymbol = ({
 
   const _node = useMemo(
     () => getNodeFromPath<Expr>(kclManager.ast, pathToNode),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
     [kclManager.ast, pathToNode]
   )
   if (err(_node)) return
@@ -662,11 +664,13 @@ export const CamDebugSettings = () => {
 
   useEffect(() => {
     sceneInfra.camControls.setReactCameraPropertiesCallback(setCamSettings)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [sceneInfra])
   useEffect(() => {
     if (camSettings.type === 'perspective' && camSettings.fov) {
       setFov(camSettings.fov)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [(camSettings as any)?.fov])
 
   return (

src/components/AstExplorer.tsx

@@ -113,6 +113,7 @@ function DisplayObj({
     } else {
       setHasCursor(false)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [node.start, node.end, node.type])
 
   return (

src/components/CamToggle.tsx

@@ -22,6 +22,7 @@ export const CamToggle = () => {
         sceneInfra.camControls.dollyZoom(fov).catch(reportRejection)
       }
     )
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [])
 
   const toggleCamera = () => {

src/components/CameraProjectionToggle.tsx

@@ -11,6 +11,7 @@ export function CameraProjectionToggle() {
 
   useEffect(() => {
     setChecked(settings.modeling.cameraProjection.current === 'perspective')
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [settings.modeling.cameraProjection.current])
 
   return (

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -33,6 +33,7 @@ function CommandArgOptionInput({
       typeof arg.options === 'function'
         ? arg.options(commandBarState.context, actorContext)
         : arg.options,
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
     [argName, arg, commandBarState.context, actorContext]
   )
   // The initial current option is either an already-input value or the configured default
@@ -49,6 +50,7 @@ function CommandArgOptionInput({
   const [selectedOption, setSelectedOption] = useState<
     CommandArgumentOption<unknown>
   >(currentOption || resolvedOptions[0])
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   const initialQuery = useMemo(() => '', [arg.options, argName])
   const [query, setQuery] = useState(initialQuery)
   const [filteredOptions, setFilteredOptions] =
@@ -61,13 +63,15 @@ function CommandArgOptionInput({
         keys: ['name', 'description'],
         threshold: 0.3,
       }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
     [argName, resolvedOptions]
   )
 
   // Reset the query and selected option when the argName changes
   useEffect(() => {
     setQuery(initialQuery)
     setSelectedOption(currentOption || resolvedOptions[0])
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [argName])
 
   // Auto focus and select the input when the component mounts

src/components/CommandBar/CommandBar.tsx

@@ -36,6 +36,7 @@ export const CommandBar = () => {
   useEffect(() => {
     if (commandBarState.matches('Closed')) return
     commandBarActor.send({ type: 'Close' })
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [pathname])
 
   /**
@@ -55,6 +56,7 @@ export const CommandBar = () => {
       commandBarActor.send({ type: 'Close' })
       toast.error('Exiting command flow because engine disconnected')
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
   }, [immediateState, commandBarActor])
 
   // Hook up keyboard shortcuts