feat: implement useRenderCount hook

README.md

@@ -132,6 +132,8 @@ Coming from `react-use`? Check out our
     Returns the most recent distinct value passed to the hook on previous render.
   - [**`useRafState`**](https://react-hookz.github.io/web/?path=/docs/state-userafstate--example) —
     Like `React.useState`, but state is only updated within animation frame.
+  - [**`useRenderCount`**](https://react-hookz.github.io/web/?path=/docs/state-userendercount--example) —
+    Tracks component's render count including first render.
   - [**`useSafeState`**](https://react-hookz.github.io/web/?path=/docs/state-usesafestate--page) —
     Like `useState`, but its state setter is guarded against sets on unmounted component.
   - [**`useSet`**](https://react-hookz.github.io/web/?path=/docs/state-useset--example) — Tracks the

src/__docs__/migrating-from-react-use.story.mdx

@@ -870,7 +870,9 @@ No API changes.
 
 #### useRendersCount
 
-Not implemented yet
+Implemented as [useRenderCount](/docs/state-userendercount--example)
+
+No API changes.
 
 #### createGlobalState
 

src/index.ts

@@ -32,6 +32,7 @@ export { useMediatedState } from './useMediatedState/useMediatedState';
 export { usePrevious } from './usePrevious/usePrevious';
 export { usePreviousDistinct } from './usePreviousDistinct/usePreviousDistinct';
 export { useRafState } from './useRafState/useRafState';
+export { useRenderCount } from './useRenderCount/useRenderCount';
 export { useSafeState } from './useSafeState/useSafeState';
 export { useSet } from './useSet/useSet';
 export { useToggle } from './useToggle/useToggle';

src/useRenderCount/__docs__/example.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useRerender } from '../../useRerender/useRerender';
+import { useRenderCount } from '../useRenderCount';
+
+export const Example: React.FC = () => {
+  const renders = useRenderCount();
+  const rerender = useRerender();
+
+  return (
+    <div>
+      <div>This component has rendered {renders} time(s)</div>
+      <br />
+      <button onClick={rerender}>Rerender</button>
+    </div>
+  );
+};

src/useRenderCount/__docs__/story.mdx

@@ -0,0 +1,29 @@
+import {Canvas, Meta, Story} from '@storybook/addon-docs';
+import {ImportPath} from '../../__docs__/ImportPath';
+import {Example} from './example.stories';
+
+<Meta title="State/useRenderCount" component={Example}/>
+
+# useRenderCount
+
+Tracks component's render count including the first render.
+
+#### Example
+
+<Canvas>
+    <Story story={Example} inline/>
+</Canvas>
+
+## Reference
+
+```ts
+export function useRenderCount(): number;
+```
+
+#### Importing
+
+<ImportPath/>
+
+#### Return
+
+- `number` of renders performed.

src/useRenderCount/__tests__/dom.ts

@@ -0,0 +1,16 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useRenderCount } from '../useRenderCount';
+
+describe('useRendersCount', () => {
+  it('should be defined', () => {
+    expect(useRenderCount).toBeDefined();
+  });
+
+  it('should return amount of renders performed', () => {
+    const { result, rerender } = renderHook(useRenderCount);
+
+    expect(result.current).toBe(1);
+    rerender();
+    expect(result.current).toBe(2);
+  });
+});

src/useRenderCount/__tests__/ssr.ts

@@ -0,0 +1,14 @@
+import { renderHook } from '@testing-library/react-hooks/server';
+import { useRenderCount } from '../useRenderCount';
+
+describe('useRendersCount', () => {
+  it('should be defined', () => {
+    expect(useRenderCount).toBeDefined();
+  });
+
+  it('should return proper amount of renders performed', () => {
+    const { result } = renderHook(useRenderCount);
+
+    expect(result.current).toBe(1);
+  });
+});

src/useRenderCount/useRenderCount.ts

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+
+/**
+ * Tracks component's render count including first render.
+ */
+export function useRenderCount(): number {
+  const rendersCount = useRef(0);
+
+  return ++rendersCount.current;
+}

src/useRerender/__docs__/example.stories.tsx

@@ -1,22 +1,16 @@
 import * as React from 'react';
-import { useRef } from 'react';
-import { useRerender } from '../..';
+import { useRenderCount } from '../../useRenderCount/useRenderCount';
+import { useRerender } from '../useRerender';
 
 export const Example: React.FC = () => {
-  const count = useRef(0);
+  const renders = useRenderCount();
   const rerender = useRerender();
 
-  count.current += 1;
-
   return (
     <div>
-      <div>This component has rendered {count.current} times</div>
-      <button
-        onClick={() => {
-          rerender();
-        }}>
-        Rerender
-      </button>
+      <div>This component has rendered {renders} time(s)</div>
+      <br />
+      <button onClick={rerender}>Rerender</button>
     </div>
   );
 };