(React) ちょっとした改造 useEffect

作ったものの使わなかったやつ。

こういうのをやりたくなった時点で、何か useEffect の使い方が間違っているような気がするが...

初回レンダリングだけスキップする useEffect

import type { DependencyList, EffectCallback } from 'react'
import { useEffect, useState } from 'react'

export function useEffectWithoutInitialRender(
  effect: EffectCallback,
  deps?: DependencyList
) {
  const [initialRender, setInitialRender] = useState<boolean>(true)
  useEffect(() => {
    if (initialRender) {
      setInitialRender(false)
      return () => {}
    }
    return effect()
  }, deps)
}

前回の deps を参照できる useEffect

import type { DependencyList } from 'react'
import { useEffect, useState } from 'react'

export function useEffectWithPrevDeps<T>(
  effect: (prevDeps?: T) => void | (() => void),
  deps: T & DependencyList
) {
  const [prevDeps, setPrevDeps] = useState<T>()
  useEffect(() => {
    setPrevDeps(deps)
    return effect(prevDeps)
  }, deps)
}