DocsCloud UI HooksuseIsFirstRender

useIsFirstRender

Check if this is the first render.

Import

import { useIsFirstRender } from '@tidbcloud/uikit'

Usage

useIsFirstRender returns true only on the first render.

import { useState } from 'react'
import { useIsFirstRender } from '@tidbcloud/uikit'
import { Button, Text } from '@tidbcloud/uikit'
 
function Demo() {
  const [count, setCount] = useState(0)
  const isFirstRender = useIsFirstRender()
 
  return (
    <>
      <Text>Is first render: {isFirstRender ? 'Yes' : 'No'}</Text>
      <Text>Count: {count}</Text>
      <Button onClick={() => setCount((c) => c + 1)}>Re-render</Button>
    </>
  )
}

Use Cases

  • Skip animations on initial render
  • Conditional logic based on first render
  • Debugging render cycles

Definition

function useIsFirstRender(): boolean
useForceUpdateuseIsomorphicEffect