https://github.com/kristiandupont/react-geiger

Skip to content
Toggle navigation
 
Sign in

  * Product
      +  
        Actions
        Automate any workflow
      +  
        Packages
        Host and manage packages
      +  
        Security
        Find and fix vulnerabilities
      +  
        Codespaces
        Instant dev environments
      +  
        Copilot
        Write better code with AI
      +  
        Code review
        Manage code changes
      +  
        Issues
        Plan and track work
      +  
        Discussions
        Collaborate outside of code
    Explore
      + All features
      + Documentation
      + GitHub Skills
      + Blog
  * Solutions
    For
      + Enterprise
      + Teams
      + Startups
      + Education
    By Solution
      + CI/CD & Automation
      + DevOps
      + DevSecOps
    Resources
      + Learning Pathways
      + White papers, Ebooks, Webinars
      + Customer Stories
      + Partners
  * Open Source
      +  
        GitHub Sponsors
        Fund open source developers
      +  
        The ReadME Project
        GitHub community articles
    Repositories
      + Topics
      + Trending
      + Collections
  * Pricing

Search or jump to...

Search code, repositories, users, issues, pull requests...

Search
[                    ]
Clear

Search syntax tips

Provide feedback

We read every piece of feedback, and take your input very seriously.

[                    ] [ ] Include my email address so I can be
contacted
Cancel Submit feedback

Saved searches

Use saved searches to filter your results more quickly

Name [                    ] 
Query [                    ]

To see all available qualifiers, see our documentation.

Cancel Create saved search
Sign in
Sign up
You signed in with another tab or window. Reload to refresh your
session. You signed out in another tab or window. Reload to refresh
your session. You switched accounts on another tab or window. Reload
to refresh your session. Dismiss alert
{{ message }}
kristiandupont / react-geiger Public

  * Notifications
  * Fork 0
  * Star 73
  * 

Audiolize React performance

License

MIT license
73 stars 0 forks Branches Tags Activity
Star
Notifications

  * Code
  * Issues 1
  * Pull requests 0
  * Actions
  * Projects 0
  * Security
  * Insights

Additional navigation options

  * Code
  * Issues
  * Pull requests
  * Actions
  * Projects
  * Security
  * Insights

kristiandupont/react-geiger

This commit does not belong to any branch on this repository, and may
belong to a fork outside of the repository.
 main
BranchesTags
  
Go to file
Code

Folders and files

                                                        Last    Last
           Name                        Name            commit  commit
                                                       message  date
Latest commit

 

History

6 Commits
 
src                         src                                 

.gitignore                  .gitignore                          

LICENSE                     LICENSE                             

README.md                   README.md                           

logo.png                    logo.png                            

not-great-not-terrible.jpg  not-great-not-terrible.jpg          

package-lock.json           package-lock.json                   

package.json                package.json                        

renovate.json               renovate.json                       

tsconfig.json               tsconfig.json                       

View all files

Repository files navigation

  * README
  * MIT license

React Geiger

 

[logo]

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 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)
  * 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.

Not Great, Not Terrible

About

Audiolize React performance

Topics

react performance profiling

Resources

Readme

License

MIT license
Activity

Stars

73 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages 0

No packages published

Contributors 2

  * @kristiandupont kristiandupont Kristian Dupont
  * @renovate[bot] renovate[bot]

Languages

  * TypeScript 100.0%

Footer

 (c) 2024 GitHub, Inc.

Footer navigation

  * Terms
  * Privacy
  * Security
  * Status
  * Docs
  * Contact
  * Manage cookies
  * Do not share my personal information

You can't perform that action at this time.