GitHub - kristiandupont/react-geiger: Audiolize React performance
source link: https://github.com/kristiandupont/react-geiger
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Repository files navigation
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
Installation
npm i react-geiger
Usage
You wrap whatever you want to track in the <Geiger>
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:
<Geiger>
<App>
</Geiger>
You can also use it on a sub-tree wherever.
The options are:
profilerId?: string;
renderTimeThreshold?: number;
phaseOption?: PhaseOption;
enabled?: boolean;
profilerId
is an id that will be passed on to theReact.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 clickphaseOption
is the phase of the render you want to track, either'mount'
,'update'
or'both'
(which is the default)enabled
defaults to true, but you can use this to disable it. Note that it relies onReact.Profiler
under the hood, which is disabled in production builds per default.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK