Docs
Is First Render

Is First Render

Differentiate between the first and subsequent renders

About

The useIsFirstRender hook helps determine if the current render is the first render of a component. This is particularly useful for conditionally executing logic or rendering specific components only on the initial render, distinguishing efficiently between the first and subsequent renders.

Return Values

NameTypeDescription
isFirstRenderbooleantrue for the first render, false for others.

Installation

Run the following command:

npx scriptkavi-hooks@latest add is-first-render

Usage

import { useIsFirstRender } from "@/hooks/is-first-render"
import * as React from "react"
 
export default function App() {
  const isFirstRender = useIsFirstRender()
  const [count, rerender] = React.useReducer((x) => x + 1, 1)
 
  return (
    <section>
      <h1>useIsFirstRender</h1>
      <h2>First Render? {isFirstRender ? "Yes" : "No"}</h2>
      <button className="primary" onClick={rerender}>
        re-render
      </button>
      <p>Render Count: {count}</p>
    </section>
  )
}
Is ClientLatest