Docs
useIsFirstRender

Track when a component is rendered for the first time with useIsFirstRender.

Loading...

Installation

pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-is-first-render

Usage

"use client"
 
import * as React from "react"
 
import { useIsFirstRender } from "@/hooks/use-is-first-render"
 
export function Component() {
  const isFirstRender = useIsFirstRender()
 
  React.useEffect(() => {
    if (!isFirstRender) {
      console.log("This effect runs on every render except the first one.")
    } else {
      console.log("This is the first render. Skipping effect.")
    }
  }, [isFirstRender])
 
  return (
    <div>
      <h2>Is First Render?</h2>
      <p>
        {isFirstRender
          ? "Yes, This is the first render."
          : "No, This is a subsequent render."}
      </p>
    </div>
  )
}

API Reference

Return Values

NameTypeDescription
isFirstRenderbooleantrue for the first render, false for others.