useIsFirstRender Hook

Sometimes in React, you want to run logic only on the first render of a component — not on subsequent updates. The useIsFirstRender hook provides a clean way to detect the initial render.

import { useRef } from 'react';

export function useIsFirstRender(): boolean {
  const isFirst = useRef(true);

  if (isFirst.current) {
    isFirst.current = false;
    return true;
  }

  return false;
}

How It Works

• useRef(true) sets up a persistent value across renders.
• On the first render, isFirst.current is true, then it gets set to false.
• On subsequent renders, the hook returns false. Unlike useEffect, which runs after render, this hook allows you to detect first render during render phase — perfect for conditional logic inside components.

Example Usage

function ExampleComponent() {
  const isFirstRender = useIsFirstRender();

  useEffect(() => {
    if (!isFirstRender) {
      console.log("Component updated (not initial render)");
    }
  }, [someState]);

  return (
    <div>
      {isFirstRender ? "First render!" : "Rendered again!"}
    </div>
  );
}

Useful if you want to skip running effects on initial render.

Common Use Cases

• Skipping an effect on initial mount (e.g., prevent sending API call immediately)
• Controlling animations that should only run on updates
• Logging updates without cluttering with the initial render

Important Notes

• This hook does not replace useEffect. It's best used with useEffect to decide whether to run side effects.
• Runs during render, not after.
• Avoid putting side effects directly inside render logic.

The useIsFirstRender hook is a lightweight and powerful utility that helps you distinguish between initial and subsequent renders in React — giving you more control over when to trigger logic.