Implement useIsFirstRender React Hook in TypeScript

This challenge involves creating a custom React hook, useIsFirstRender, that accurately determines if a component is currently rendering for the very first time. This hook is useful for side effects or logic that should only execute once when a component mounts, helping to prevent unintended re-executions in functional components.

Problem Description

Your task is to implement a custom React hook named useIsFirstRender in TypeScript. This hook should return a boolean value: true if the component using it is rendering for its initial mount, and false on all subsequent renders.

Key Requirements:

1. Correctly Identify First Render: The hook must reliably distinguish between the initial mount and subsequent re-renders caused by state changes, prop updates, or context changes.
2. State Management: The hook needs a mechanism to internally track whether the first render has already occurred.
3. TypeScript Support: The hook should be written in TypeScript, ensuring type safety.

Expected Behavior:

When a component renders for the first time, useIsFirstRender() should return true. On any subsequent re-renders of that same component instance, useIsFirstRender() should return false.

Edge Cases to Consider:

• Components that render conditionally.
• Fast refresh (hot module replacement) in development environments. The hook should still correctly identify the actual first render of a component instance.

Examples

Example 1:

import React, { useState } from 'react';
import { useIsFirstRender } from './useIsFirstRender'; // Assume hook is in this file

function MyComponent() {
  const isFirst = useIsFirstRender();
  const [count, setCount] = useState(0);

  React.useEffect(() => {
    console.log(`Effect on first render: ${isFirst}`);
    // This effect should log true only once
  }, []);

  return (
    <div>
      <p>Is this the first render? {isFirst ? 'Yes' : 'No'}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
}

// In App.tsx:
// <MyComponent />

Output on Initial Mount of MyComponent:

Effect on first render: true

Output on Subsequent Renders (after clicking "Increment"):

Is this the first render? No

The console.log within the useEffect will NOT run again because isFirst will be false on subsequent renders, and the effect's dependency array is empty.

Example 2:

import React, { useState, useEffect } from 'react';
import { useIsFirstRender } from './useIsFirstRender';

function AnotherComponent({ initialValue }: { initialValue: number }) {
  const isFirst = useIsFirstRender();

  useEffect(() => {
    if (isFirst) {
      console.log(`Initializing with: ${initialValue}`);
    } else {
      console.log(`Component re-rendered. Initial value was: ${initialValue}`);
    }
  }, [initialValue, isFirst]); // Include isFirst in dependencies for clarity, though it won't change

  return (
    <div>
      <p>Initial Value: {initialValue}</p>
      <p>Is first render for this instance: {isFirst ? 'true' : 'false'}</p>
    </div>
  );
}

// In App.tsx:
// const [value, setValue] = useState(10);
// <AnotherComponent initialValue={value} />
// <button onClick={() => setValue(20)}>Change Value</button>

Output when initialValue is 10 and AnotherComponent mounts:

Initializing with: 10

Output when "Change Value" button is clicked, causing initialValue to become 20:

Component re-rendered. Initial value was: 10

(The console.log inside the useEffect will execute again, but isFirst will be false.)

Constraints

• The hook must be implemented using React's built-in hooks (useState, useRef, useEffect, etc.).
• The hook should not rely on any external libraries.
• The solution should be efficient and not introduce unnecessary overhead.

Notes

• Consider how you can persist a value across renders without causing re-renders yourself. useRef is often a good candidate for this.
• Think about when a component's lifecycle signifies its "first render" in React's rendering cycle.
• Be mindful of how React's fast refresh might affect your internal tracking mechanism.