Is First Render

Docs

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

Name	Type	Description
isFirstRender	boolean	`true` 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 Client List