[IMPL] useFPS hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useFPS/UseFPS.tsx

@@ -0,0 +1,9 @@
+import { useFPS } from "../../../../../../packages/react-tools/src"
+
+/**
+The component uses _useFPS_ hook to compute FPS and shows details on screen.
+ */
+export const UseFPS = () => {
+	const fps = useFPS();
+	return <p>FPS: {fps.currentFps} - avg: {fps.avg} - Max FPS: {fps.maxFps}</p>
+}

apps/react-tools-demo/src/constants/components.ts

@@ -42,7 +42,7 @@ export const COMPONENTS = [
 			"useCallbackDeepCompare",
 			"useLazyRef",
 			"useMergedRef",
-			"useId"
+			"useId",
 		],
 		//EVENTS
 		[
@@ -99,7 +99,8 @@ export const COMPONENTS = [
 			"useBluetooth",
 			"useScreenWakeLock",
 			"useSpeechRecognition",
-			"useSpeechSynthesis"
+			"useSpeechSynthesis",
+			"useFPS"
 		]
 	],
 	//UTILS

apps/react-tools-demo/src/markdown/useFPS.md

@@ -0,0 +1,40 @@
+# useFPS
+Hook to detect FPS (Frames per second).
+
+## Usage
+
+```tsx
+export const UseFPS = () => {
+	const fps = useFPS();
+	return <p>FPS: {fps.currentFps} - avg: {fps.avg} - Max FPS: {fps.maxFps}</p>
+}
+```
+
+> The component uses _useFPS_ hook to compute FPS and shows details on screen.
+
+
+## API
+
+```tsx
+useFPS({ everySeconds, windowSize }:UseFPSProps={windowSize:10, everySeconds:.5}): UseFPSResult
+```
+
+> ### Params
+>
+> - __opts?__: _UseFPSProps_  
+configuration options to detect FPS.
+> - __opts.everySeconds=0.5?__: _number_  
+it indicates how often to compute FPS. Default is 0.5 second.
+> - __opts.windowSize=10?__: _number_  
+it indicates how FPS result keep in memory and computing average. Default is 10.
+>
+
+> ### Returns
+>
+> __result__:  _UseFPSResult_  
+> Stateful object with these properties:
+> -  __fps__: array of computed FPS by _windowSize_.
+> -  __currentFps__: current FPS value.
+> -  __avg__: average of FPS values kept in memory.
+> -  __maxFps__: maximum FPS value computed.
+>

apps/react-tools-demo/src/markdown/useRaf.md

@@ -33,7 +33,7 @@ useRaf<T extends unknown[]>(cb: (timer: number, repeat: ()=>void, ...args: T) =>
 
 > ### Params
 >
-> - __cb__: _(timer:number, ()=>void, ...args: T) => void_  
+> - __cb__: _(timer:number, repeat:()=>void, ...args: T)=>void_  
  callback to execute prior to the next repaint. In addition to the classic timeStamp parameter, which indicates the end time of rendering of the previous frame, the second parameter is a function which, if invoked, re-executes the requestAnimationFrame with the callback itself, and finally various parameters can be added, passed with the invocation function returned by the hook.
 >
 

packages/react-tools/README.md

@@ -78,7 +78,7 @@
 	- [x] useDebounce
 	- [x] useThrottle
 	- [x] useActiveElement
-	- [x] useRaf (with a reference to call itself again)
+	- [x] useRaf
 	- [x] useTimeout
 	- [x] useInterval
 	- [x] useTextSelection
@@ -88,7 +88,7 @@
 	- [x] useReducedMotion
 	- [x] useTitle
 	- [x] useIdle
-	- [x] useFullscreen (check browser compatibility)
+	- [x] useFullscreen
 	- [x] useBattery
 	- [x] useGeolocation
 	- [x] useShare
@@ -101,8 +101,7 @@
 	- [x] useScreenWakeLock
 	- [x] useSpeechRecognition
 	- [x] useSpeechSynthesis
-	- [ ] useDevicesList (https://vueuse.org/core/useDevicesList/)
-	- [ ] useFPS (https://vueuse.org/core/useFps/)
+	- [x] useFPS
 	- [ ] useParallax (https://vueuse.org/core/useParallax/)
 	- [ ] useScrollLock (https://vueuse.org/core/useScrollLock/)
 	- [ ] useAnimate (https://vueuse.org/core/useAnimate/)
@@ -113,6 +112,8 @@
 	- [ ] useFetch (with suspense ???)
 	- [ ] useAsync
 	- [ ] useMedia
+	- [ ] useDevicesList (https://vueuse.org/core/useDevicesList/)
+	- [ ] useDisplayMedia
 	- [ ] useScreenShare
 	- [ ] useMediaDevices
 	- [ ] useMediaStream

packages/react-tools/src/hooks/index.ts

@@ -79,4 +79,5 @@ export { useDerivedState } from './useDerivedState';
 export { useBluetooth } from './useBluetooth';
 export { useScreenWakeLock } from './useScreenWakeLock';
 export { useSpeechRecognition } from './useSpeechRecognition';
-export { useSpeechSynthesis } from './useSpeechSynthesis';
+export { useSpeechSynthesis } from './useSpeechSynthesis';
+export { useFPS } from './useFPS';

packages/react-tools/src/hooks/useFPS.ts

@@ -0,0 +1,68 @@
+import { useRef, useState } from "react"
+import { useEffectOnce, useRaf } from ".";
+import { UseFPSProps, UseFPSResult } from "../models";
+
+/**
+ * **`useFPS`**: Hook to detect FPS (Frames per second).
+ * @param {UseFPSProps} [opts] - configuration options to detect FPS.
+ * @param {number} [opts.everySeconds=0.5] - it indicates how often to compute FPS. Default is 0.5 second.
+ * @param {number} [opts.windowSize=10] - it indicates how FPS result keep in memory and computing average. Default is 10.
+ * @returns {UseFPSResult} result
+ * Stateful object with these properties:
+ * -  __fps__: array of computed FPS by _windowSize_.
+ * -  __currentFps__: current FPS value.
+ * -  __avg__: average of FPS values kept in memory.
+ * -  __maxFps__: maximum FPS value computed.
+ */
+export const useFPS = ({ everySeconds, windowSize }:UseFPSProps={windowSize:10, everySeconds:.5}): UseFPSResult => {
+	const [fps, setFps] = useState<UseFPSResult>({fps: [], avg: 0, maxFps: 0, currentFps: 0});
+	const state = useRef<{ started: boolean, ratings: number[], frames: number, startTime: number, lastTime: number, fps: number[], avg: number, maxFps: number, currentFps: number, calc: (timer: number, repeat: () => void) => void }>({
+		started: false,
+		ratings: [],
+		frames: 0,
+		startTime: performance.now(),
+		lastTime: 0,
+		fps: [],
+		avg:0,
+		maxFps: 0,
+		currentFps: 0,
+		calc: (timer: number, repeat: () => void) => {
+			state.current.frames++;
+			state.current.lastTime = timer;
+			if (state.current.lastTime > state.current.startTime+(everySeconds*1000)) {
+				const elapsedTime = state.current.lastTime - state.current.startTime;
+				let currentFps = Math.round(1000 / (elapsedTime/state.current.frames));
+				let fps = [...state.current.fps, currentFps];
+				fps = fps.slice(Math.max(state.current.fps.length - windowSize, 0));
+				const avg = +(fps.reduce((a, b) => a + b, 0) / fps.length).toFixed(2);
+				const maxFps = Math.max(currentFps, state.current.maxFps);
+				currentFps = fps.at(-1) as number;
+				if (fps.some((el, index) => state.current.fps[index] !== el) || avg !== state.current.avg || maxFps !== state.current.maxFps || currentFps !== state.current.currentFps) {
+					state.current.fps = fps;
+					state.current.currentFps = currentFps;
+					state.current.avg = avg;
+					state.current.maxFps = maxFps;
+					setFps({
+						fps,
+						currentFps,
+						maxFps,
+						avg
+					})
+				}
+
+				state.current.startTime = timer;
+				state.current.frames = 0;
+			}
+			repeat();
+		}
+	});
+	const [start, cancel] = useRaf(state.current.calc)
+	if (!state.current.started) {
+		state.current.started = true;
+		start();
+	}
+
+	useEffectOnce(() => () => cancel());
+
+	return fps;
+}

packages/react-tools/src/hooks/useRaf.ts

@@ -2,7 +2,7 @@ import { useCallback, useRef } from "react"
 
 /**
  * **`useRaf`**: Hook to execute a callback function with _requestAnimationFrame_ to optimize performance. Refer to (requestAnimationFrame)[https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame].
- * @param {(timer:number, ()=>void, ...args: T) => void} cb -  callback to execute prior to the next repaint. In addition to the classic timeStamp parameter, which indicates the end time of rendering of the previous frame, the second parameter is a function which, if invoked, re-executes the requestAnimationFrame with the callback itself, and finally various parameters can be added, passed with the invocation function returned by the hook.
+ * @param {(timer:number, repeat:()=>void, ...args: T)=>void} cb -  callback to execute prior to the next repaint. In addition to the classic timeStamp parameter, which indicates the end time of rendering of the previous frame, the second parameter is a function which, if invoked, re-executes the requestAnimationFrame with the callback itself, and finally various parameters can be added, passed with the invocation function returned by the hook.
  * @returns {[(...args: T)=>void, ()=>void]} results - array with __start__ function to invoke _requestAnimationFrame_ and __cancel__ function to invoke _cancelAnimationFrame_.
  */
 export const useRaf = <T extends unknown[]>(cb: (timer: number, repeat: ()=>void, ...args: T) => void): [(...args: T)=>void, ()=>void] => {

packages/react-tools/src/index.ts

@@ -41,6 +41,8 @@ export type {
 	UseSpeechSynthesis,
 	UseSpeechSynthesisProps,
 	SpeechSynthesisSpeakParam,
+	UseFPSProps,
+	UseFPSResult
 } from './models'
 
 export {
@@ -125,7 +127,8 @@ export {
 	useBluetooth,
 	useScreenWakeLock,
 	useSpeechRecognition,
-	useSpeechSynthesis
+	useSpeechSynthesis,
+	useFPS
 } from './hooks'
 
 export {

packages/react-tools/src/models/index.ts

@@ -10,4 +10,5 @@ export type { DeviceMotionProps } from './useDeviceMotion.model';
 export type { DeviceOrientationProps } from './useDeviceOrientation.model';
 export type { Bluetooth, BluetoothCharacteristicProperties, BluetoothCharacteristicUUID, BluetoothDescriptorUUID, BluetoothDevice, BluetoothDevicesOptions, BluetoothRemoteGATTCharacteristic, BluetoothRemoteGATTDescriptor, BluetoothRemoteGATTServer, BluetoothRemoteGATTService, BluetoothScanFilters, BluetoothServiceUUID } from './useBluetooth.model';
 export type { UseSpeechRecognitionProps, SpeechRecognition, SpeechRecognitionConfig, SpeechRecognitionState, SpeechGrammar, SpeechGrammarList, SpeechRecognitionErrorCode, SpeechRecognitionErrorEvent, SpeechRecognitionEvent } from './useSpeechRecognition.model';
-export type { SpeechSynthesisSpeakParam, UseSpeechSynthesis, UseSpeechSynthesisProps } from './useSpeechSynthesis.model';
+export type { SpeechSynthesisSpeakParam, UseSpeechSynthesis, UseSpeechSynthesisProps } from './useSpeechSynthesis.model';
+export type { UseFPSProps, UseFPSResult} from './useFPS.model';