chore: hooksのロジックを整理する

packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx

@@ -272,7 +272,8 @@ const ActualMultiComboBox = <T,>(
     return textColor.grey
   }, [disabled, isFocused])
 
-  useOuterClick([outerRef, listBoxRef], blur)
+  const outerClickRef = useMemo(() => [outerRef, listBoxRef], [outerRef, listBoxRef])
+  useOuterClick(outerClickRef, blur)
 
   useEffect(() => {
     if (highlighted) {

packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx

@@ -320,7 +320,7 @@ const ActualSingleComboBox = <T,>(
   }, [disabled, isFocused])
 
   useClick(
-    [outerRef, listBoxRef, clearButtonRef],
+    useMemo(() => [outerRef, listBoxRef, clearButtonRef], [outerRef, listBoxRef, clearButtonRef]),
     useCallback(() => {
       if (!isFocused && onSelect && !selectedItem && defaultItem) {
         onSelect(defaultItem)

packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx

@@ -227,7 +227,7 @@ export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
     }, [value, isInputFocused, dateToString, dateToAlternativeFormat, stringToDate])
 
     useOuterClick(
-      [inputWrapperRef, calendarPortalRef],
+      useMemo(() => [inputWrapperRef, calendarPortalRef], [inputWrapperRef, calendarPortalRef]),
       useCallback(() => {
         switchCalendarVisibility(false)
       }, [switchCalendarVisibility]),

packages/smarthr-ui/src/hooks/useClick.ts

@@ -1,34 +1,35 @@
-import { RefObject, useCallback, useEffect } from 'react'
+import { RefObject, useEffect } from 'react'
 
 export function useClick(
   innerRefs: Array<RefObject<HTMLElement>>,
   innerCallback: (e: MouseEvent) => void,
   outerCallback: (e: MouseEvent) => void,
 ) {
-  const handleClick = useCallback(
-    (e: MouseEvent) => {
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
       if (innerRefs.some((target) => isEventIncludedParent(e, target.current))) {
         innerCallback(e)
+
         return
       }
+
       outerCallback(e)
-    },
-    // spread innerRefs to compare deps one by one
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [...innerRefs, innerCallback, outerCallback],
-  )
+    }
 
-  useEffect(() => {
     window.addEventListener('click', handleClick)
 
     return () => {
       window.removeEventListener('click', handleClick)
     }
-  }, [handleClick])
+  }, [innerRefs, innerCallback, outerCallback])
 }
 
 function isEventIncludedParent(e: MouseEvent, parent: Element | null): boolean {
+  if (!parent) return false
+
   const path = e.composedPath()
-  if (path.length === 0 || !parent) return false
+
+  if (path.length === 0) return false
+
   return path.includes(parent)
 }

packages/smarthr-ui/src/hooks/useDevice/useDevice.ts

@@ -3,7 +3,4 @@ import { createContext, useContext } from 'react'
 
 export const DeviceContext = createContext<boolean | null>(null)
 
-export const useDevice = () => {
-  const isNarrowView = useContext(DeviceContext)
-  return { isNarrowView }
-}
+export const useDevice = () => ({ isNarrowView: useContext(DeviceContext) })

packages/smarthr-ui/src/hooks/useHandleEscape.ts

@@ -1,18 +1,19 @@
-import { useCallback, useEffect } from 'react'
+import { useEffect } from 'react'
+
+// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
+// Esc is a IE/Edge specific value
+const ESCAPE_KEY_REGEX = /^Esc(ape)?$/
 
 export const useHandleEscape = (cb: () => void) => {
-  const handleKeyPress = useCallback(
-    (e: KeyboardEvent) => {
-      // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
-      // Esc is a IE/Edge specific value
-      if (e.key === 'Escape' || e.key === 'Esc') {
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (ESCAPE_KEY_REGEX.test(e.key)) {
         cb()
       }
-    },
-    [cb],
-  )
-  useEffect(() => {
+    }
+
     document.addEventListener('keydown', handleKeyPress)
+
     return () => document.removeEventListener('keydown', handleKeyPress)
-  }, [handleKeyPress])
+  }, [cb])
 }

packages/smarthr-ui/src/hooks/useOuterClick.ts

@@ -1,31 +1,30 @@
-import { RefObject, useCallback, useEffect } from 'react'
+import { RefObject, useEffect } from 'react'
 
 export function useOuterClick(
   targets: Array<RefObject<HTMLElement>>,
   callback: (e: MouseEvent) => void,
 ) {
-  const handleOuterClick = useCallback(
-    (e: MouseEvent) => {
-      if (targets.some((target) => isEventIncludedParent(e, target.current))) {
-        return
+  useEffect(() => {
+    const handleOuterClick = (e: MouseEvent) => {
+      if (targets.every((target) => isEventExcludedParent(e, target.current))) {
+        callback(e)
       }
-      callback(e)
-    },
-    // spread targets to compare deps one by one
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [...targets, callback],
-  )
+    }
 
-  useEffect(() => {
     window.addEventListener('click', handleOuterClick)
+
     return () => {
       window.removeEventListener('click', handleOuterClick)
     }
-  }, [handleOuterClick])
+  }, [callback, targets])
 }
 
-function isEventIncludedParent(e: MouseEvent, parent: Element | null): boolean {
+function isEventExcludedParent(e: MouseEvent, parent: Element | null): boolean {
+  if (!parent) return false
+
   const path = e.composedPath()
-  if (path.length === 0 || !parent) return false
-  return path.includes(parent)
+
+  if (path.length === 0) return false
+
+  return !path.includes(parent)
 }

packages/smarthr-ui/src/hooks/usePortal.tsx

@@ -25,7 +25,15 @@ export function usePortal() {
   const [portalRoot, setPortalRoot] = useState<HTMLDivElement | null>(null)
   const currentSeq = useMemo(() => ++portalSeq, [])
   const parent = useContext(ParentContext)
-  const parentSeqs = parent.seqs.concat(currentSeq)
+
+  const calculatedSeqs = useMemo(() => {
+    const parentSeqs = parent.seqs.concat(currentSeq)
+
+    return {
+      parentSeqs,
+      portalChildOf: parentSeqs.join(','),
+    }
+  }, [currentSeq, parent.seqs])
 
   useEnhancedEffect(() => {
     // Next.jsのhydration error回避のため、初回レンダリング時にdivを作成する
@@ -36,36 +44,37 @@ export function usePortal() {
     if (!portalRoot) {
       return
     }
-    portalRoot.dataset.portalChildOf = parentSeqs.join(',')
+
+    portalRoot.dataset.portalChildOf = calculatedSeqs.portalChildOf
     document.body.appendChild(portalRoot)
+
     return () => {
       document.body.removeChild(portalRoot)
     }
-    // spread parentSeqs array for deps
-  }, [portalRoot, ...parentSeqs])
+  }, [portalRoot, calculatedSeqs.portalChildOf])
 
   const isChildPortal = useCallback(
-    (element: HTMLElement | null) => _isChildPortal(element, currentSeq),
+    (element: HTMLElement | null) => _isChildPortal(element, new RegExp(`(^|,)${currentSeq}(,|$)`)),
     [currentSeq],
   )
 
   const PortalParentProvider: FC<{ children: ReactNode }> = useCallback(
     ({ children }) => {
       const value: ParentContextValue = {
-        seqs: parentSeqs,
+        seqs: calculatedSeqs.parentSeqs,
       }
+
       return <ParentContext.Provider value={value}>{children}</ParentContext.Provider>
     },
-    // spread parentSeqs array for deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [...parentSeqs],
+    [calculatedSeqs.parentSeqs],
   )
 
   const wrappedCreatePortal = useCallback(
     (children: ReactNode) => {
       if (portalRoot === null) {
         return null
       }
+
       return createPortal(children, portalRoot)
     },
     [portalRoot],
@@ -82,12 +91,15 @@ export function usePortal() {
   }
 }
 
-function _isChildPortal(
-  element: HTMLElement | SVGElement | null,
-  parentPortalSeq: number,
-): boolean {
+function _isChildPortal(element: HTMLElement | SVGElement | null, seqRegex: RegExp): boolean {
   if (!element) return false
-  const childOf = element.dataset?.portalChildOf || ''
-  const includesSeq = childOf.split(',').includes(String(parentPortalSeq))
-  return includesSeq || _isChildPortal(element.parentElement, parentPortalSeq)
+
+  let includesSeq = false
+  const childOf = element.dataset?.portalChildOf
+
+  if (childOf) {
+    includesSeq = seqRegex.test(childOf)
+  }
+
+  return includesSeq || _isChildPortal(element.parentElement, seqRegex)
 }

packages/smarthr-ui/src/hooks/useTheme.ts

@@ -5,7 +5,4 @@ import { CreatedTheme } from '../themes/createTheme'
 
 export type Theme = CreatedTheme
 
-export const useTheme = () => {
-  const theme = useContext(ThemeContext)
-  return theme
-}
+export const useTheme = () => useContext(ThemeContext)