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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
Shows that even though the config to react-axe uses 1000 ms,
axe.run
is fired every frame.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 nowaxe.run
is only called after the debounce time.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)