fix: lint errors about hooks

.eslintrc.js

@@ -58,7 +58,7 @@ const defaultConfig = {
       },
     ],
     'react-hooks/exhaustive-deps': [
-      'warn',
+      'error',
       {
         additionalHooks: '(useViewEffect)',
       },

src/common/components/ResizablePanel.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 
 import { clamp, classNames, range, throttle } from '../utils'
 
@@ -15,6 +15,8 @@ export interface ResizablePanelProps {
   className?: string
 }
 
+const getOffsetWidth = (ref: React.RefObject<HTMLElement>) => ref.current!.offsetWidth
+
 const ResizablePanel = ({
   children: [leftChild, rightChild],
   throttle: throttleMs = DEFAULT_RESIZE_THROTTLE_MS,
@@ -24,13 +26,17 @@ const ResizablePanel = ({
   const dividerRef = useRef<HTMLDivElement>(null)
   const rightChildRef = useRef<HTMLDivElement>(null)
 
-  const getDividerWidth = (): number => dividerRef.current!.offsetWidth
-
-  const getTotalWidth = (): number => containerRef.current!.offsetWidth - getDividerWidth()
+  const getTotalWidth = useCallback(
+    () => getOffsetWidth(containerRef) - getOffsetWidth(dividerRef),
+    [],
+  )
 
-  const getInitialLeftChildWidth = (): number => 0.5 * getTotalWidth()
+  const getInitialLeftChildWidth = useCallback(() => getTotalWidth() / 2, [getTotalWidth])
 
-  const getAvailableWidth = (): number => getTotalWidth() - rightChildRef.current!.offsetWidth
+  const getAvailableWidth = useCallback(
+    () => getTotalWidth() - getOffsetWidth(rightChildRef),
+    [getTotalWidth],
+  )
 
   const [leftChildWidth, __setLeftChildWidth] = useState<number>()
   const isReady = leftChildWidth !== undefined
@@ -44,7 +50,7 @@ const ResizablePanel = ({
     if (!isReady) {
       setLeftChildWidth(getInitialLeftChildWidth())
     }
-  }, [isReady])
+  }, [getInitialLeftChildWidth, isReady])
 
   useLayoutEffect(() => {
     if (leftChildWidth !== undefined) {
@@ -53,7 +59,7 @@ const ResizablePanel = ({
         setLeftChildWidth(availableWidth)
       }
     }
-  }, [leftChildWidth])
+  }, [getAvailableWidth, leftChildWidth])
 
   const [isDragging, setDragging] = useState(false)
 
@@ -81,7 +87,7 @@ const ResizablePanel = ({
     }
 
     const handleMouseMove = throttle((event: MouseEvent) => {
-      const dividerWidth = getDividerWidth()
+      const dividerWidth = getOffsetWidth(dividerRef)
       const clientX = event.clientX - dividerWidth / 2
 
       const totalWidth = getTotalWidth()
@@ -112,7 +118,7 @@ const ResizablePanel = ({
       document.removeEventListener('mousemove', handleMouseMove)
       document.removeEventListener('mouseup', handleMouseUp)
     }
-  }, [isDragging, throttleMs])
+  }, [getAvailableWidth, getTotalWidth, isDragging, throttleMs])
 
   return (
     <>

src/common/hooks.ts

@@ -1,4 +1,12 @@
-import { RefCallback, useEffect, useReducer, useRef, useState } from 'react'
+import {
+  RefCallback,
+  useCallback,
+  useEffect,
+  useInsertionEffect,
+  useReducer,
+  useRef,
+  useState,
+} from 'react'
 
 import { isFunction } from './utils/common'
 import type { NonNullishValue } from './utils/types'
@@ -19,6 +27,21 @@ export const useSingleton = <T extends NonNullishValue>(instance: T | (() => T))
 
 export const useRefCallback = <T>(): [T | null, RefCallback<T>] => useState<T | null>(null)
 
+// https://github.com/SukkaW/foxact/blob/master/src/use-stable-handler-only-when-you-know-what-you-are-doing-or-you-will-be-fired/index.ts
+export const useStableHandler = <A extends unknown[], R>(
+  callback: (...args: A) => R,
+): typeof callback => {
+  const callbackRef = useRef<typeof callback>(null!)
+  useInsertionEffect(() => {
+    callbackRef.current = callback
+  }, [callback])
+
+  return useCallback<typeof callback>((...args) => {
+    const fn = callbackRef.current
+    return fn(...args)
+  }, [])
+}
+
 export const useOutsideClick = <T extends Element = Element>(
   handler: (event: MouseEvent) => void,
 ): RefCallback<T> => {
@@ -59,10 +82,6 @@ export const useHover = <T extends Element = Element>(
     isHovered: false,
   })
 
-  const clearHoverTimeout = (): void => {
-    window.clearTimeout(mutableState.timeoutId)
-  }
-
   useEffect(() => {
     if (current === null) {
       return
@@ -78,6 +97,9 @@ export const useHover = <T extends Element = Element>(
         }, delay)
       }
     }
+    const clearHoverTimeout = (): void => {
+      window.clearTimeout(mutableState.timeoutId)
+    }
     const handleMouseLeave = (): void => {
       clearHoverTimeout()
       handler(/* isHovered: */ false)
@@ -94,7 +116,7 @@ export const useHover = <T extends Element = Element>(
         mutableState.isHovered = false
       }
     }
-  }, [current, handler, delay])
+  }, [current, delay, handler, mutableState])
 
   return refCallback
 }

src/features/controller/Menu.tsx

@@ -43,7 +43,7 @@ const Menu = ({ children }: Props): JSX.Element => {
         setCurrentOpen(menuElement)
       }
     },
-    [currentOpen, menuElement],
+    [currentOpen, menuElement, setCurrentOpen],
   )
   const hoverRef = useHover(handleHover)
 

src/features/controller/Toolbar.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react'
 
 import Anchor from '@/common/components/Anchor'
 import { Github } from '@/common/components/icons'
-import { useOutsideClick } from '@/common/hooks'
+import { useOutsideClick, useStableHandler } from '@/common/hooks'
 
 import ConfigurationMenu from './ConfigurationMenu'
 import ControlButtons from './ControlButtons'
@@ -14,21 +14,21 @@ import ViewMenu from './ViewMenu'
 const ToolBar = (): JSX.Element => {
   const [openMenu, __setOpenMenu] = useState<HTMLDivElement | null>(null)
 
-  const setOpenMenu = (element: HTMLDivElement | null): void => {
+  const setOpenMenu = useStableHandler((element: HTMLDivElement | null) => {
     __setOpenMenu(element)
     outsideClickRef(element)
-  }
+  })
 
   const menuContextValue = useMemo(() => {
     return {
       currentOpen: openMenu,
       setCurrentOpen: setOpenMenu,
     }
-  }, [openMenu])
+  }, [openMenu, setOpenMenu])
 
   const handleOutsideClick = useCallback(() => {
     setOpenMenu(null)
-  }, [])
+  }, [setOpenMenu])
   const outsideClickRef = useOutsideClick(handleOutsideClick)
 
   return (

src/features/controller/hooks.ts

@@ -418,7 +418,7 @@ export const useController = (): Controller => {
 
   useEffect(() => {
     return subscribe(store.onAction(setEditorInput), controller.resetSelf)
-  }, [])
+  }, [controller])
 
   useEffect(() => {
     return subscribe(
@@ -428,11 +428,11 @@ export const useController = (): Controller => {
       ),
       controller.assemble,
     )
-  }, [])
+  }, [controller])
 
   useEffect(() => {
     return subscribe(store.onAction(setAssemblerState), controller.resetSelf)
-  }, [])
+  }, [controller])
 
   useEffect(() => {
     return subscribe(
@@ -445,7 +445,7 @@ export const useController = (): Controller => {
       ),
       controller.stopAndRun,
     )
-  }, [])
+  }, [controller])
 
   return controller
 }

src/features/io/SevenSegmentDisplay.tsx

@@ -167,7 +167,7 @@ const SevenSegmentDisplay = (): JSX.Element | null => {
         }),
       )
     })
-  }, [])
+  }, [subscribeOutputData])
 
   return isVisible ? (
     <DeviceCard name="Seven-segment Display" onClose={toggleVisible}>

src/features/io/hooks.ts

@@ -32,7 +32,7 @@ export const useIoDevice = (deviceName: IoDeviceName): IoDevice => {
     (listener: DataListener) => {
       return subscribe(store.onState(selectData), listener)
     },
-    [deviceName],
+    [selectData],
   )
 
   const selectVisibility = useMemo(() => selectIoDeviceVisibility(deviceName), [deviceName])
@@ -51,7 +51,7 @@ export const useIoDevice = (deviceName: IoDeviceName): IoDevice => {
         toggleVisible,
       )
     }
-  }, [isVisible, deviceName])
+  }, [deviceName, isVisible, toggleVisible])
 
   return { data, subscribeData, isVisible, toggleVisible }
 }