useUpdateEffect

useUpdateEffect is a custom hook that skips side effects on the initial render, and only runs them when the dependency array changes.

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

If you use this code, you need to add "use client" to the top of the file.

Usage

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

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

import { useUpdateEffect } from "@workspaces/ui"

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