perf(getUnhandledProps): replace lodash with vanilla js

[levithomason]

Fixes #859

TL;DR Conclusion at the bottom.

As with the linked issue, I've also noticed some severe performance issues, mostly in Grid and Grid column. It appears there is a memory leak somewhere in getUnhandledProps due to lodash.

Calculating unhandled props can be expensive due to the several nested object references it has to traverse to first calculate the handled props: autoControlledProps, defaultProps keys, props keys. It then needs to loop the props again to omit all those keys. This can be done several times per render, per element. This alone should not be responsible for the results we're seeing below, however.

This PR replaces lodash with vanilla JS, resulting in >12,000 times performance improvement .

It also caches handledProps so they are only calculated once per component (handled props never change). This will be fixed permanently once #731 is merged as we'll have a static array of handled props baked into every component.

Rough Perf Analysis

No cache, lodash (baseline)

After lots of testing, I notice that the Grid and Grid column render times seem increase every render for the particular view I am testing against. Note the instance count and render count remains constant, but the time required is growing rapidly.

First Render - 1s

Second Render - 3s

Third Render - 27s

With cache, lodash

First Render - 1.5s

Second Render - 21s

Third Render - 1.3s

Additional tests...

I found the 21s odd here, so I ran renders 4 and 5 with results of 3.6s and 2.8s. This seems odd.

No cache, vanilla JS

All three runs completed in <=2ms (approx.) 😮. This certainly means, lodash is at fault here.

Cache and vanilla JS

Using vanilla JS is obviously sufficient, however, I tested vanilla with cache for completeness. The results were not significantly different from vanilla JS without cache.

Conclusion

Something in lodash is extremely non-performant given the usage in our getUnhandledProps() lib method. Using vanilla JS increases performance by up to >12,000 times. Caching makes no difference and is not necessary.

[codecov-io]

Current coverage is 99.95% (diff: 100%)

Merging #860 into master will decrease coverage by 0.04%

@@           master       #860   diff @@
========================================
  Files         137        137          
  Lines        2254       2254          
  Methods         0          0          
  Messages        0          0          
  Branches        0          0          
========================================
- Hits         2254       2253     -1   
- Misses          0          1     +1   
  Partials        0          0          

Powered by Codecov. Last update cf14691...70a3a43

[levithomason]

Released in [email protected].

[markerikson]

Hah. I'm playing around with Semantic-UI-React on a sample project for the first time, and just ran into this behavior myself (in my case, with a tabbed menu acting as parent to some panels with a couple simple forms). After adding a table and a small form,the time to switch tabs became extremely noticeable. A perf profile showed the issue you found here, and fortunately I ran a quick search before filing another issue :)