Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kristiandupont/react-geiger
Audiolize React performance
https://github.com/kristiandupont/react-geiger
performance profiling react
Last synced: 7 days ago
JSON representation
Audiolize React performance
- Host: GitHub
- URL: https://github.com/kristiandupont/react-geiger
- Owner: kristiandupont
- License: mit
- Created: 2024-03-09T12:51:23.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-06-13T20:21:38.000Z (28 days ago)
- Last Synced: 2024-06-13T23:15:03.823Z (28 days ago)
- Topics: performance, profiling, react
- Language: TypeScript
- Homepage:
- Size: 232 KB
- Stars: 911
- Watchers: 3
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- my-awesome-stars - kristiandupont/react-geiger - Audiolize React performance (TypeScript)
- awesome-stars - kristiandupont/react-geiger - Audiolize React performance (TypeScript)
README
# React Geiger
React Geiger is a tool for "audiolizing" React performance issues. You can have it running in the background and makes little clicks which will point your attention to excessive (slow) component rerenders.
Play with it in this [playground](https://playcode.io/1793073)
## Installation
```bash
npm i react-geiger
```
## Usage
You wrap whatever you want to track in the `` component, and re-renders inside will cause a click if they take longer than the threshold set (default: 50ms).
The most basic setup is wrapping your entire app:
```tsx
```
You can also use it on a sub-tree wherever.
The options are:
```tsx
profilerId?: string;
renderTimeThreshold?: number;
phaseOption?: PhaseOption;
customSoundFile?: string
enabled?: boolean;
```
- `profilerId` is an id that will be passed on to the `React.Profiler` component. You probably don't need to change this.
- `renderTimeThreshold` is the time in milliseconds that will trigger a click. Default is 50ms. Set to 0 to make any re-render click
- `phaseOption` is the phase of the render you want to track, either `'mount'`, `'update'` or `'both'` (which is the default)
- `customSoundFile` path to a custom sound file, if you want to use something else than the default click sound
- `enabled` defaults to true, but you can use this to disable it. Note that it relies on `React.Profiler` under the hood, which is disabled in production builds per default.
