Skip to content
This repository has been archived by the owner on Mar 19, 2021. It is now read-only.

fix(debounce): make 3rd parameter a true debounce #135

Merged
merged 2 commits into from
Feb 14, 2020
Merged

Conversation

straker
Copy link
Contributor

@straker straker commented Feb 13, 2020

So looking into the code I noticed that the 3rd parameter was touted as a debounce timeout
but it wasn't really that at all. Instead, it was being passed as an option to the requestIdleCallback function, which isn't a debounce but a timeout to force a run on the next idle cycle. This is why no matter what the value was, react-axe would continue to fire on every componentDidUpdate event causing massive performance problems (See #132, #120, and #116).

Using the config:

if (process.env.NODE_ENV !== 'production') {
  axe(React, ReactDOM, 1000, axeConf);
}

Shows that even though the config to react-axe uses 1000 ms, axe.run is fired every frame.

Screen Shot 2020-02-13 at 3 06 04 PM

To fix this I implemented a true debounce to the componentDidUpdate call that will respect the user provided value. This greatly improves the performance of app as now axe.run is only called after the debounce time.

Screen Shot 2020-02-13 at 3 06 43 PM

We can discuss if we want react-axe to fire on the leading edge or the trailing edge (which is where it is currently).

Closes issue: #132, #120, and #116

Reviewer checks

Required fields, to be filled out by PR reviewer(s)

  • Follows the commit message policy, appropriate for next version
  • Code is reviewed for security

@straker straker requested a review from WilcoFiers as a code owner February 13, 2020 22:16
@straker straker merged commit ec1b55e into develop Feb 14, 2020
@straker straker deleted the trueDebounce branch February 14, 2020 16:20
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants