https://github.com/ryanhefner/react-speedo
⏱ Tooling to help you monitor the performance of your React applications.
https://github.com/ryanhefner/react-speedo
performance react react-hooks
Last synced: 28 days ago
JSON representation
⏱ Tooling to help you monitor the performance of your React applications.
- Host: GitHub
- URL: https://github.com/ryanhefner/react-speedo
- Owner: ryanhefner
- License: mit
- Created: 2021-12-22T02:25:24.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-06T14:23:54.000Z (over 4 years ago)
- Last Synced: 2025-03-18T13:22:32.184Z (about 1 year ago)
- Topics: performance, react, react-hooks
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-speedo
Tooling to help you monitor the performance of your React applications.
## Install
Via [npm](https://npmjs.com/package/react-speedo)
```sh
npm install react-speedo
```
Via [Yarn](https://yarn.pm/react-speedo)
```sh
yarn add react-speedo
```
## How to use
### `useSpeedo` (Hook)
```js
import { useRef, useState } from 'react'
import { useSpeedo } from 'react-speedo'
const YourComponent = () => {
const { begin, end, value } = useSpeedo()
const [run, setRun] = useState(true)
const animationFrameRef = useRef(null)
useEffect(() => {
const tick = async () => {
begin()
...[some async tasks or other heavy code]
end()
}
if (run && !animationFrameRef.current) {
animationFrameRef.current = requestAnimationFrame(tick)
} else if (!run && animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current)
animationFrameRef.current = null
}
}, [run])
return
{`${value}fps`}
}
```
## License
[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)