@knitui/hooks
useIsFirstRender
true on the first render, false afterwards — port of Mantine's useIsFirstRender. Updates during render (no effect), so it's correct even before effects flush. Pure React, so identical on web and native.
Import
import { useIsFirstRender } from "@knitui/hooks";Signature
export function useIsFirstRender(): booleanReturns true the first time a component renders and false on every render
after that. The flag lives in a ref that is flipped during render, not in an
effect, so the answer is already correct in the same pass that reads it.
That timing is the whole point. The usual alternative — a useState flag set in
a mount effect — is still reporting "first render" during the initial render and
only corrects itself after commit, which costs an extra render and gives you the
wrong answer exactly where you wanted to branch. useIsFirstRender never
schedules an update, so a component that renders once renders once.
When to use it
- Skipping an entrance transition so content does not animate in on first paint.
- Guarding change-driven work so it does not run for the initial value.
- Choosing between "initialise" and "update" paths in a render-phase computation.
Notes
- Pure React with no platform split; identical on web and native.
- Reading it has a side effect: the first call flips the ref. Call it once per render and reuse the value rather than calling it in two places.
- For the post-commit question — "has this component mounted yet?" — use
useMounted. For running an effect on every update except the first, useuseDidUpdate.