Optimize Icon validation in development (and others?)

[dvdzkwsk]

This should be a fairly easy fix, but it is quite important as I noticed non-negligible slowdown in one of our applications today until implementing local workarounds. Steps below, posting this as a reminder so we don't forget about it.

Steps

1. Render the Icon component.
2. Note the render time, using something like the React perf tools
3. For extra fun, run a bunch of repeated renders fairly quickly, as in a normal app environment

Expected Result

It should be super fast, the icon is a tiny component!

Actual Result

It can cripple applications in development when propTypes are not ignored due to expensive validation on supported icon names.

Version

v0.64.2

Testcase

Not yet provided

[levithomason]

The suggest prop type checker is expensive, especially on massive lists of options like icon names and flag names. Simply _.memoize()ing it would do wonders here.

[levithomason]

Until this is solved, @traverse suggested a great workaround in Gitter about this. You can skip prop validation entirely by simply using className instead of name. In this component's case, the name is forwarded directly to the className without modification, only validation.

<Icon name='user' />        // will validate, is slow
<Icon className='user' />   // no validation, is fast

Also note, propTypes are stripped in production automatically so this should only be a development issue.

[rahilsondhi]

The performance of my app improved significantly when changing name to className. Redux actions that used to take 300ms now take under 50ms (this is all in development). We should make this more clear to users that they shouldn't use name, or we should just remove suggest.

[levithomason]

I don't think using name is a good solution, so it is not promoted beyond this issue as a workaround. I'd like to keep the validation as it is super useful.

Memoizing is the answer here. It is pretty minimal in this case. There should be a cache of input values and suggested results. After the first render, this would be nearly as fast as using className only.

PRs welcome.

[ayastreb]

I'd like to take this issue, if noone has started working on it yet.