dequelabs / react-axe

[DEPRECATED] Accessibility auditing for React.js applications
Other
1.16k stars 45 forks source link

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

Closed straker closed 4 years ago

straker commented 4 years ago

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)