From 0a724191121b07df4c59eb3bd306b2df0744ad06 Mon Sep 17 00:00:00 2001 From: Chloe Mouret Date: Tue, 25 Oct 2022 21:52:02 +0200 Subject: [PATCH 1/4] Add useRendersCount hook with tests and doc --- .../__docs__/example.stories.tsx | 15 +++++++++++ src/useRendersCount/__docs__/story.mdx | 25 +++++++++++++++++++ src/useRendersCount/__tests__/dom.ts | 22 ++++++++++++++++ src/useRendersCount/__tests__/ssr.ts | 7 ++++++ src/useRendersCount/useRendersCount.ts | 8 ++++++ 5 files changed, 77 insertions(+) create mode 100644 src/useRendersCount/__docs__/example.stories.tsx create mode 100644 src/useRendersCount/__docs__/story.mdx create mode 100644 src/useRendersCount/__tests__/dom.ts create mode 100644 src/useRendersCount/__tests__/ssr.ts create mode 100644 src/useRendersCount/useRendersCount.ts diff --git a/src/useRendersCount/__docs__/example.stories.tsx b/src/useRendersCount/__docs__/example.stories.tsx new file mode 100644 index 000000000..2b1faadaa --- /dev/null +++ b/src/useRendersCount/__docs__/example.stories.tsx @@ -0,0 +1,15 @@ +import React, { useState } from 'react'; +import { useRendersCount } from '../useRendersCount'; + +export const Example: React.FC = () => { + const [count, setCount] = useState(0); + const rendersCount = useRendersCount(); + + return ( +
+ Renders count: {rendersCount} +
+ +
+ ); +}; diff --git a/src/useRendersCount/__docs__/story.mdx b/src/useRendersCount/__docs__/story.mdx new file mode 100644 index 000000000..641e8706e --- /dev/null +++ b/src/useRendersCount/__docs__/story.mdx @@ -0,0 +1,25 @@ +import { Canvas, Meta, Story } from '@storybook/addon-docs'; +import { Example } from './example.stories'; +import { ImportPath } from '../../__docs__/ImportPath'; + + + +# useRendersCount + +Tracks component's renders count including the first render. + +#### Example + + + + + +## Reference + +```ts +export function useRendersCount(): number; +``` + +#### Importing + + diff --git a/src/useRendersCount/__tests__/dom.ts b/src/useRendersCount/__tests__/dom.ts new file mode 100644 index 000000000..a1e632d4c --- /dev/null +++ b/src/useRendersCount/__tests__/dom.ts @@ -0,0 +1,22 @@ +import { renderHook } from '@testing-library/react-hooks'; +import { useRendersCount } from '../useRendersCount'; + +describe('useRendersCount', () => { + it('should be defined', () => { + expect(useRendersCount).toBeDefined(); + }); + + it('should return number', () => { + expect(renderHook(() => useRendersCount()).result.current).toEqual(expect.any(Number)); + }); + + it('should return actual number of renders', () => { + const hook = renderHook(() => useRendersCount()); + + expect(hook.result.current).toBe(1); + hook.rerender(); + expect(hook.result.current).toBe(2); + hook.rerender(); + expect(hook.result.current).toBe(3); + }); +}); diff --git a/src/useRendersCount/__tests__/ssr.ts b/src/useRendersCount/__tests__/ssr.ts new file mode 100644 index 000000000..6d8d80a03 --- /dev/null +++ b/src/useRendersCount/__tests__/ssr.ts @@ -0,0 +1,7 @@ +import { useRendersCount } from '../useRendersCount'; + +describe('useRendersCount', () => { + it('should be defined', () => { + expect(useRendersCount).toBeDefined(); + }); +}); diff --git a/src/useRendersCount/useRendersCount.ts b/src/useRendersCount/useRendersCount.ts new file mode 100644 index 000000000..ae7bae3bc --- /dev/null +++ b/src/useRendersCount/useRendersCount.ts @@ -0,0 +1,8 @@ +import { useRef } from 'react'; + +export function useRendersCount(): number { + const rendersCount = useRef(0); + rendersCount.current += 1; + + return rendersCount.current; +} From 47d7ce03b30d4f7f8541e3fb822024ba3555543a Mon Sep 17 00:00:00 2001 From: xobotyi Date: Fri, 18 Nov 2022 10:49:19 +0100 Subject: [PATCH 2/4] fix: address review issues, add migration entry, add readme entry --- README.md | 2 ++ .../migrating-from-react-use.story.mdx | 4 ++- src/index.ts | 1 + .../__docs__/example.stories.tsx | 16 ++++++++++ src/useRenderCount/__docs__/story.mdx | 29 +++++++++++++++++++ src/useRenderCount/__tests__/dom.ts | 16 ++++++++++ src/useRenderCount/__tests__/ssr.ts | 14 +++++++++ src/useRenderCount/useRenderCount.ts | 10 +++++++ .../__docs__/example.stories.tsx | 15 ---------- src/useRendersCount/__docs__/story.mdx | 25 ---------------- src/useRendersCount/__tests__/dom.ts | 22 -------------- src/useRendersCount/__tests__/ssr.ts | 7 ----- src/useRendersCount/useRendersCount.ts | 8 ----- src/useRerender/__docs__/example.stories.tsx | 18 ++++-------- 14 files changed, 97 insertions(+), 90 deletions(-) create mode 100644 src/useRenderCount/__docs__/example.stories.tsx create mode 100644 src/useRenderCount/__docs__/story.mdx create mode 100644 src/useRenderCount/__tests__/dom.ts create mode 100644 src/useRenderCount/__tests__/ssr.ts create mode 100644 src/useRenderCount/useRenderCount.ts delete mode 100644 src/useRendersCount/__docs__/example.stories.tsx delete mode 100644 src/useRendersCount/__docs__/story.mdx delete mode 100644 src/useRendersCount/__tests__/dom.ts delete mode 100644 src/useRendersCount/__tests__/ssr.ts delete mode 100644 src/useRendersCount/useRendersCount.ts diff --git a/README.md b/README.md index 259afc1df..3c1147588 100644 --- a/README.md +++ b/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 diff --git a/src/__docs__/migrating-from-react-use.story.mdx b/src/__docs__/migrating-from-react-use.story.mdx index fbab6be32..bf67f6343 100644 --- a/src/__docs__/migrating-from-react-use.story.mdx +++ b/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 diff --git a/src/index.ts b/src/index.ts index c42aae16f..5b26ac9db 100644 --- a/src/index.ts +++ b/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'; diff --git a/src/useRenderCount/__docs__/example.stories.tsx b/src/useRenderCount/__docs__/example.stories.tsx new file mode 100644 index 000000000..179326c3b --- /dev/null +++ b/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 ( +
+
This component has rendered {renders} time(s)
+
+ +
+ ); +}; diff --git a/src/useRenderCount/__docs__/story.mdx b/src/useRenderCount/__docs__/story.mdx new file mode 100644 index 000000000..ee2380ab9 --- /dev/null +++ b/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'; + + + +# useRenderCount + +Tracks component's renders count including the first render. + +#### Example + + + + + +## Reference + +```ts +export function useRendersCount(): number; +``` + +#### Importing + + + +#### Return + +- `number` of renders performed. diff --git a/src/useRenderCount/__tests__/dom.ts b/src/useRenderCount/__tests__/dom.ts new file mode 100644 index 000000000..2dfb28849 --- /dev/null +++ b/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); + }); +}); diff --git a/src/useRenderCount/__tests__/ssr.ts b/src/useRenderCount/__tests__/ssr.ts new file mode 100644 index 000000000..d9f9dd1af --- /dev/null +++ b/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); + }); +}); diff --git a/src/useRenderCount/useRenderCount.ts b/src/useRenderCount/useRenderCount.ts new file mode 100644 index 000000000..cbd3d7eee --- /dev/null +++ b/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; +} diff --git a/src/useRendersCount/__docs__/example.stories.tsx b/src/useRendersCount/__docs__/example.stories.tsx deleted file mode 100644 index 2b1faadaa..000000000 --- a/src/useRendersCount/__docs__/example.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { useState } from 'react'; -import { useRendersCount } from '../useRendersCount'; - -export const Example: React.FC = () => { - const [count, setCount] = useState(0); - const rendersCount = useRendersCount(); - - return ( -
- Renders count: {rendersCount} -
- -
- ); -}; diff --git a/src/useRendersCount/__docs__/story.mdx b/src/useRendersCount/__docs__/story.mdx deleted file mode 100644 index 641e8706e..000000000 --- a/src/useRendersCount/__docs__/story.mdx +++ /dev/null @@ -1,25 +0,0 @@ -import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { Example } from './example.stories'; -import { ImportPath } from '../../__docs__/ImportPath'; - - - -# useRendersCount - -Tracks component's renders count including the first render. - -#### Example - - - - - -## Reference - -```ts -export function useRendersCount(): number; -``` - -#### Importing - - diff --git a/src/useRendersCount/__tests__/dom.ts b/src/useRendersCount/__tests__/dom.ts deleted file mode 100644 index a1e632d4c..000000000 --- a/src/useRendersCount/__tests__/dom.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { renderHook } from '@testing-library/react-hooks'; -import { useRendersCount } from '../useRendersCount'; - -describe('useRendersCount', () => { - it('should be defined', () => { - expect(useRendersCount).toBeDefined(); - }); - - it('should return number', () => { - expect(renderHook(() => useRendersCount()).result.current).toEqual(expect.any(Number)); - }); - - it('should return actual number of renders', () => { - const hook = renderHook(() => useRendersCount()); - - expect(hook.result.current).toBe(1); - hook.rerender(); - expect(hook.result.current).toBe(2); - hook.rerender(); - expect(hook.result.current).toBe(3); - }); -}); diff --git a/src/useRendersCount/__tests__/ssr.ts b/src/useRendersCount/__tests__/ssr.ts deleted file mode 100644 index 6d8d80a03..000000000 --- a/src/useRendersCount/__tests__/ssr.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { useRendersCount } from '../useRendersCount'; - -describe('useRendersCount', () => { - it('should be defined', () => { - expect(useRendersCount).toBeDefined(); - }); -}); diff --git a/src/useRendersCount/useRendersCount.ts b/src/useRendersCount/useRendersCount.ts deleted file mode 100644 index ae7bae3bc..000000000 --- a/src/useRendersCount/useRendersCount.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { useRef } from 'react'; - -export function useRendersCount(): number { - const rendersCount = useRef(0); - rendersCount.current += 1; - - return rendersCount.current; -} diff --git a/src/useRerender/__docs__/example.stories.tsx b/src/useRerender/__docs__/example.stories.tsx index cc2f723c3..b8465191b 100644 --- a/src/useRerender/__docs__/example.stories.tsx +++ b/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 (
-
This component has rendered {count.current} times
- +
This component has rendered {renders} time(s)
+
+
); }; From 120170cbb7ac2a41a7a64a2289a1c162c5c5dd2e Mon Sep 17 00:00:00 2001 From: Arttu Olli <60509537+ArttuOll@users.noreply.github.com> Date: Fri, 18 Nov 2022 18:26:22 +0200 Subject: [PATCH 3/4] docs(useRenderCount): Fix typo in function reference --- src/useRenderCount/__docs__/story.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/useRenderCount/__docs__/story.mdx b/src/useRenderCount/__docs__/story.mdx index ee2380ab9..cf624d897 100644 --- a/src/useRenderCount/__docs__/story.mdx +++ b/src/useRenderCount/__docs__/story.mdx @@ -17,7 +17,7 @@ Tracks component's renders count including the first render. ## Reference ```ts -export function useRendersCount(): number; +export function useRenderCount(): number; ``` #### Importing From 0d87619b9abfd1b1518f08ada0a1cb1d7f18eb61 Mon Sep 17 00:00:00 2001 From: Arttu Olli <60509537+ArttuOll@users.noreply.github.com> Date: Sat, 19 Nov 2022 16:07:49 +0200 Subject: [PATCH 4/4] docs(useRenderCount): Fix typo in hook documentation --- src/useRenderCount/__docs__/story.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/useRenderCount/__docs__/story.mdx b/src/useRenderCount/__docs__/story.mdx index cf624d897..428117454 100644 --- a/src/useRenderCount/__docs__/story.mdx +++ b/src/useRenderCount/__docs__/story.mdx @@ -6,7 +6,7 @@ import {Example} from './example.stories'; # useRenderCount -Tracks component's renders count including the first render. +Tracks component's render count including the first render. #### Example