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: about 1 month 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 (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-06T14:23:54.000Z (almost 3 years ago)
• Last Synced: 2024-10-05T18:17:49.828Z (about 2 months 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)