useFirstRender

Check if component is just mounted (on first render).

---

API

const isFirstRender = useFirstRender();

Options

No need any option

Returns

• isFirstRender: boolean
  • Value will be true if component is just mounted, and false otherwise

---

Examples

http://localhost:3000/

Count: 0

First render? Yes

JS

import { useState } from 'react';
import { useFirstRender } from 'react-power-ups';

export function Demo() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((prev) => prev + 1);

  const isFirstRender = useFirstRender();

  return (
    <>
      <span>Count: {count}</span>
      <button onClick={increment}>Increment (trigger re-render)</button>

      <div>First render? {isFirstRender ? 'Yes' : 'No'}</div>
    </>
  );
}

TS

import { useState } from 'react';
import { useFirstRender } from 'react-power-ups';

export function Demo() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((prev) => prev + 1);

  const isFirstRender = useFirstRender();

  return (
    <>
      <span>Count: {count}</span>
      <button onClick={increment}>Increment (trigger re-render)</button>

      <div>First render? {isFirstRender ? 'Yes' : 'No'}</div>
    </>
  );
}

---

Code: https://github.com/afiiif/react-power-ups/blob/main/src/use-first-render.ts