Handle hovered vs focused in CSS to improve performance on large lists #707
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.
When a very large number of entries are present in the list, hovering on the dropdown results in a very noticeable slowness. I've tracked that down to the fact that the state gets updated each time a new element is hovered.
This was done in order to track the index of the hovered element in the list but as far as I can tell, at least in the current version of the code, the only reason to do this was to check that "something" was hovered or not. This in turn was used to decide if adding the class
${optionClassName}--focused
was needed or not.What I did here is remove
hovered
from the state altogether and use CSS to restrict the effect of the class in the case where the mouse is not hovering the list. From my tests this has no negative side-effects and remove all choppiness on large lists. It also removes the need for the special "hack" that was present inhandleOptionMouseEnter
for iOS because the content of the event is not redrawn anyway.The tests linked to the removed functions have be removed as well. I'm not really sure what new test should be added (if any) but I'm happy to add them if you want!