useIsFirstRender

NewSSR SAFE

Determines whether the current render is the initial mount.

$ pnpm dlx shadcn@latest add @byphongphan/use-is-first-render

Requires @byphongphan in components.json

state

use-is-first-render.tsx

Render statusFirst render

isFirstRender

true

Render count: 1

Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/use-is-first-render

Requires @byphongphan in components.json

Usage

import { useState } from "react"import { useIsFirstRender } from "@/shared/hooks"
export function RenderComponent() {  const isFirstRender = useIsFirstRender()  const [count, setCount] = useState(0)
  return (    <div>      <p>        {isFirstRender          ? "This is the initial render."          : "This is a subsequent render."}      </p>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>        Trigger re-render      </button>    </div>  )}

useIsFirstRender

Installation

Usage

Command Palette