useUpdateEffect

useUpdateEffectは、初回のレンダリング時にはエフェクトをスキップし、依存配列が変更された場合にのみエフェクトを実行するカスタムフックです。

state changed by useEffect: 1

state changed by useUpdateEffect: 1

const [state, setState] = useState(1)
const [updateState, setUpdateState] = useState(1)
const [flg, { toggle }] = useBoolean()

useEffect(() => {
  setState((prev) => prev + 1)
}, [flg])

useUpdateEffect(() => {
  setUpdateState((prev) => prev + 1)
}, [flg])

return (
  <VStack alignItems="flex-start">
    <VStack gap="0">
      <Text>state changed by useEffect: {String(state)}</Text>
      <Text>state changed by useUpdateEffect: {String(updateState)}</Text>
    </VStack>

    <Button onClick={toggle}>Update state</Button>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

import { useUpdateEffect } from "@yamada-ui/react"

import { useUpdateEffect } from "@/components/ui"

import { useUpdateEffect } from "@workspaces/ui"

useUpdateEffect(() => {}, [])