Implement useRenderCount Hook in React

Create a custom React hook called useRenderCount that efficiently tracks how many times a component has rendered. This hook is invaluable for debugging performance issues, understanding component lifecycle, and optimizing your React applications by providing a simple way to monitor rendering frequency.

Problem Description

You need to implement a custom React hook in TypeScript named useRenderCount. This hook should return a number representing the total number of times the component that uses it has rendered.

Key Requirements:

1. Hook Signature: The hook should be a function named useRenderCount and should not accept any arguments.
2. Return Value: It must return a number representing the current render count.
3. Increment Logic: The render count should increment every time the component using the hook re-renders.
4. Persistence: The count must persist across renders.

Expected Behavior:

When a component uses useRenderCount, the returned value should start at 0 on the initial render, increment to 1 on the first re-render, 2 on the second, and so on.

Edge Cases to Consider:

• Initial Render: The count should be 0 on the very first render.
• Multiple Components: If multiple components use the useRenderCount hook, each should maintain its own independent render count.

Examples

Example 1:

import React, { useState } from 'react';
import { useRenderCount } from './useRenderCount'; // Assuming your hook is in this file

function CounterComponent() {
  const [count, setCount] = useState(0);
  const renderCount = useRenderCount();

  return (
    <div>
      <p>Component Render Count: {renderCount}</p>
      <p>State Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment State</button>
    </div>
  );
}

// In App.tsx or similar:
// <CounterComponent />

Output during interaction:

• Initial Render:

  Component Render Count: 0
  State Count: 0
  

• After clicking "Increment State" once:

  Component Render Count: 1
  State Count: 1
  

• After clicking "Increment State" again:

  Component Render Count: 2
  State Count: 2
  

Explanation: The useRenderCount hook correctly identifies each re-render triggered by the state update. The initial render shows 0, and each subsequent state change leads to an incremented render count.

Example 2:

Consider two components using the hook concurrently.

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

function ComponentA() {
  const renderCountA = useRenderCount();
  return <p>Component A Renders: {renderCountA}</p>;
}

function ComponentB() {
  const renderCountB = useRenderCount();
  return <p>Component B Renders: {renderCountB}</p>;
}

function App() {
  const [trigger, setTrigger] = useState(0);

  return (
    <div>
      <ComponentA />
      <ComponentB />
      <button onClick={() => setTrigger(trigger + 1)}>Trigger Re-render</button>
    </div>
  );
}

Output during interaction:

• Initial Render:

  Component A Renders: 0
  Component B Renders: 0
  

• After clicking "Trigger Re-render" once:

  Component A Renders: 1
  Component B Renders: 1
  

• After clicking "Trigger Re-render" again:

  Component A Renders: 2
  Component B Renders: 2
  

Explanation: Both ComponentA and ComponentB correctly track their individual render counts. A re-render of the App component causes both ComponentA and ComponentB to re-render, and their respective render counts increment independently.

Constraints

• The solution must be written in TypeScript.
• The hook must be named useRenderCount.
• The hook should not introduce unnecessary re-renders in the components that use it, beyond what's inherent to tracking the count.
• The hook should be compatible with the latest stable version of React.

Notes

• Think about how to store and update a value that needs to persist across renders without causing the component itself to re-render unnecessarily just to update the count. useRef is a strong candidate here.
• Ensure the type annotations are correct for TypeScript.
• The returned count should reflect the number of times the hook's component has rendered.