---
title: useUpdateEffect
description: "`useUpdateEffect`は、初回のレンダリング時にはエフェクトをスキップし、依存配列が変更された場合にのみエフェクトを実行するカスタムフックです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-update-effect
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-useupdateeffect--basic
---

```tsx
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>
)
```

## 使い方

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

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

```tsx
import { useUpdateEffect } from "@workspaces/ui"
```

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