Icon render slow depending on the word order in name property

[akomm]

Looks like #2149 did not entirely fix #1184

Or is it not possible to "fix" the suggest performance via memoize entirely?

Steps

1. Create Icon component
2. Provide the name property "square check" (word order is important)
3. (optional) Render it multiple times or copy & paste the same icon 10 times

Expected Result

Rendering should be fast.

Actual Result

Rendering is very slow. In my case 10 Icons under dev environment take about 600-800ms.
When you write "check square" it renders fast.

Did not test it with other multi-word icons.

Found the issue in suggest-usage from inside the semantic Icon component using performance profiling.

Version

0.76.0

[dvdzkwsk]

PR for this: #2314. I don't think memoize is enough, the lookup through an array is super expensive when there are multiple unique icons. I'm going to consider ways to optimize the word ordering, since that will always perform an expensive check, unfortunately.

[akomm]

I once noticed that the compiled CSS for icons (the one with content values) is quite large. So far it was not that critical and important, but I had the Idea to maybe create a small parser and go through FA variables.scss and generate an array of "icon name" => "content value", while "icon name" is split and ordered and joined together. Then create an Icon component, which accepts a name prop, but does split and order the words same way. The class/style for its content could be generated inside the Icon component itself. Ordering words consistent in Icon component and the precompilation of the name-value-array should make the need of searching and guessing obsolete.

Not sure how this fits into this project, as you have the CSS and this project actually separated, since the CSS for everything beside the content-values would still have to come from CSS and version matching might be important.

[brianespinosa]

@akomm At some point in the future styles may become a part of this repository, but at present, we are relying on the structure of the CSS that comes out of the build tools for SUI core.

In my current project we are actually passing the icon names as the className instead for performance in development. As @levithomason mentioned on the original issue, this only effects dev environments. In production all PropType validation is not enabled.

[akomm]

Thanks for the post reference. I did find it too before I'v posted this issue. This is only for feedback purpose on the PR, which missed this edge case (word order). :)

[levithomason]

This should be fixed in #2314. Release coming soon.