useRenderInfo

CHANGELOG.md

@@ -627,3 +627,10 @@ online
 ### Fixed
 
 - Webpack 5 error with the `isDevelopment` constant
+
+
+## [0.31.0] - 2020-10-09
+
+### Added
+
+- `useRenderInfo` hook and tests

README.md

@@ -100,6 +100,7 @@ $ yarn add beautiful-react-hooks
 * [useSessionStorage](docs/useSessionStorage.md)
 * [useStorage](docs/useStorage.md)
 * [useDefaultedState](docs/useDefaultedState.md)
+* [useRenderInfo](docs/useRenderInfo.md)
 
 <div>
   <p align="center">

docs/README.es-ES.md

@@ -98,6 +98,7 @@ $ yarn add beautiful-react-hooks
 * [useSessionStorage](./useSessionStorage.md)
 * [useStorage](./useStorage.md)
 * [useDefaultedState](./useDefaultedState.md)
+* [useRenderInfo](docs/useRenderInfo.md)
 
 <div>
   <p align="center">

docs/README.it-IT.md

@@ -96,6 +96,8 @@ $ yarn add beautiful-react-hooks
 * [useSessionStorage](./useSessionStorage.md)
 * [useStorage](./useStorage.md)
 * [useDefaultedState](./useDefaultedState.md)
+* [useRenderInfo](docs/useRenderInfo.md)
+
 <div>
   <p align="center">
     <a href="https://beautifulinteractions.github.io/beautiful-react-hooks/" target="_blank">

docs/README.jp-JP.md

@@ -97,6 +97,7 @@ $ yarn add beautiful-react-hooks
 * [useSessionStorage](./useSessionStorage.md)
 * [useStorage](./useStorage.md)
 * [useDefaultedState](./useDefaultedState.md)
+* [useRenderInfo](docs/useRenderInfo.md)
 
 <div>
   <p align="center">

docs/README.pl-PL.md

@@ -96,6 +96,7 @@ $ yarn add beautiful-react-hooks
 * [useSessionStorage](./useSessionStorage.md)
 * [useStorage](./useStorage.md)
 * [useDefaultedState](./useDefaultedState.md)
+* [useRenderInfo](docs/useRenderInfo.md)
 
 <div>
   <p align="center">

docs/README.pt-BR.md

@@ -97,6 +97,7 @@ $ yarn add beautiful-react-hooks
 * [useSessionStorage](./useSessionStorage.md)
 * [useStorage](./useStorage.md)
 * [useDefaultedState](./useDefaultedState.md)
+* [useRenderInfo](docs/useRenderInfo.md)
 
 <div>
   <p align="center">

docs/README.uk-UA.md

@@ -98,6 +98,7 @@ $ yarn add beautiful-react-hooks
 * [useSessionStorage](./useSessionStorage.md)
 * [useStorage](./useStorage.md)
 * [useDefaultedState](./useDefaultedState.md)
+* [useRenderInfo](docs/useRenderInfo.md)
 
 <div>
   <p align="center">

docs/README.zh-CN.md

@@ -96,6 +96,7 @@ $ yarn add beautiful-react-hooks
 * [useSessionStorage](./useSessionStorage.md)
 * [useStorage](./useStorage.md)
 * [useDefaultedState](./useDefaultedState.md)
+* [useRenderInfo](docs/useRenderInfo.md)
 
 <div>
   <p align="center">

docs/useRenderInfo.md

@@ -0,0 +1,72 @@
+# useRenderInfo
+
+Takes a component name and prints information on how many time the component renders, at what time and how many seconds 
+has passed since the last render.
+
+### Why? 💡
+
+- Easily display information on components render
+
+### Basic Usage:
+
+```jsx harmony
+import useInterval  from 'beautiful-react-hooks/useInterval'; 
+import useRenderInfo  from 'beautiful-react-hooks/useRenderInfo';
+
+
+const RenderInfo = () => {
+    const [seconds, setSeconds] = React.useState(0);
+
+    // repeat the function each 1000ms
+    useInterval(() => {
+      setSeconds(1 + seconds);
+    }, 1000);      
+
+
+   useRenderInfo('Module'); 
+
+   return (
+     <DisplayDemo>
+       <p>Check the console!</p>
+     </DisplayDemo>
+   );
+};
+
+<RenderInfo />
+```
+
+### Custom logs:
+
+```jsx harmony
+import useInterval  from 'beautiful-react-hooks/useInterval'; 
+import useRenderInfo  from 'beautiful-react-hooks/useRenderInfo';
+
+
+const RenderInfo = () => {
+    const [seconds, setSeconds] = React.useState(0);
+    const info = useRenderInfo(); 
+
+    // repeat the function each 1000ms
+    useInterval(() => {
+      setSeconds(1 + seconds);
+    }, 1000);
+
+   return (
+     <DisplayDemo>
+       <p>I'm not using the console, {info.sinceLast} seconds passed from the last render!</p>
+     </DisplayDemo>
+   );
+};
+
+<RenderInfo />
+```
+
+### Mastering the hook
+
+#### ✅ When to use
+ 
+- When debugging a component
+
+#### 🛑 What not to do
+
+- In production build, you don't want useless logs in console :)

index.d.ts

@@ -16,8 +16,8 @@ type EventListenerOptions = {
   passive: boolean,
 }
 
-type HandlerSetter <T = Array<any>> = (a: T) => void;
-                    
+type HandlerSetter<T = Array<any>> = (a: T) => void;
+
 type Cancelable = {
   cancel(): void;
   flush(): void;
@@ -268,3 +268,13 @@ type SpeechOptions = {
 }
 
 export declare const useSpeechSynthesis: (text: string, options?: SpeechOptions) => ({ speak: Function, speechSynthUtterance: SpeechSynthesisUtterance });
+
+
+type RenderInfo = {
+  module: string,
+  renders: number,
+  timestamp: number,
+  sinceLast: string,
+}
+
+export declare const useRenderInfo: (name?: string, log?: boolean) => RenderInfo;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "beautiful-react-hooks",
-  "version": "0.30.6",
+  "version": "0.31.0",
   "description": "A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development",
   "main": "index.js",
   "module": "esm/index.js",

src/index.js

@@ -33,3 +33,4 @@ export { default as useDefaultedState } from './useDefaultedState';
 export { default as useObservable } from './useObservable';
 export { default as useSpeechSynthesis } from './useSpeechSynthesis';
 export { default as useSystemVoices } from './useSystemVoices';
+export { default as useRenderInfo } from './useRenderInfo';

src/useRenderInfo.js

@@ -0,0 +1,36 @@
+import { useRef } from 'react';
+
+const getInitial = (module) => ({
+  module,
+  renders: 0,
+  timestamp: null,
+  sinceLast: null,
+});
+
+/**
+ * useRenderInfo
+ * @param module
+ * @param log
+ * @returns {{renders: number, module: *, timestamp: null}}
+ */
+const useRenderInfo = (module = 'Unknown component', log = true) => {
+  const { current: info } = useRef(getInitial(module));
+  const now = +Date.now();
+
+  info.renders += 1;
+  info.sinceLast = info.timestamp ? (now - info.timestamp) / 1000 : '[now]';
+  info.timestamp = now;
+
+  if (log) {
+    /* eslint-disable no-console */
+    console.group(`${module} info`);
+    console.log(`Render no: ${info.renders}${info.renders > 1 ? `, ${info.sinceLast}s since last render` : ''}`);
+    console.dir(info);
+    console.groupEnd();
+    /* eslint-enable no-console */
+  }
+
+  return info;
+};
+
+export default useRenderInfo;

test/useRenderInfo.spec.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { cleanup, renderHook } from '@testing-library/react-hooks';
+import useRenderInfo from '../dist/useRenderInfo';
+
+describe('useRenderInfo', () => {
+  beforeEach(cleanup);
+
+  afterEach(sinon.restore);
+
+  it('should be a function', () => {
+    expect(useRenderInfo).to.be.a('function');
+  });
+
+  it('should return an information object', () => {
+    const name = 'Foo';
+    const { result: { current: info } } = renderHook(() => useRenderInfo(name, false));
+
+    expect(info).to.be.an('object');
+    expect(info.module).to.equal(name);
+    expect(info.renders).to.be.a('number');
+    expect(info.sinceLast).to.be.a('string');
+    expect(info.timestamp).to.be.a('number');
+  });
+
+  it('should print consistent information', () => {
+    const { result: { current: info }, rerender } = renderHook(() => useRenderInfo('foo', false));
+
+    rerender();
+    rerender();
+
+    expect(info.renders).to.equal(3);
+  });
+
+  it('should print renders information in group', () => {
+    const groupSpy = sinon.spy(console, 'group');
+    const groupEndSpy = sinon.spy(console, 'groupEnd');
+    const logSpy = sinon.spy(console, 'log');
+
+    renderHook(() => useRenderInfo(name, true));
+
+    expect(logSpy.called).to.be.true;
+    expect(groupSpy.called).to.be.true;
+    expect(groupEndSpy.called).to.be.true;
+  });
+});