フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )

マウント時には実行しない useUpdateEffect

● useUpdateEffect

/hooks/useUpdateEffect.ts

import { useEffect, useRef, DependencyList, EffectCallback } from "react"

const useUpdateEffect = (
  effect: EffectCallback,
  dependencies?: DependencyList
) => {
  const isInitialMount = useRef<boolean>(true)

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false
    } else {
      return effect()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, dependencies)
}

export default useUpdateEffect

● useUpdateEffect の 使い方

 /*
   * useUpdateEffect
   * (指定の変数 input 変更時)(アンマウント時)に実行
   */
useUpdateEffect(() => {
  // 実行したい処理

  return () => {
    // クリーンアップの処理
  }

  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [input])
No.2412
11/09 10:47

edit