[Addon: Knobs] - Performance Fix: added debouncing between keystrokes to speed up component rendering

[CodeByAlex]

Issue: #5376

What I did

I added debouncing logic with lodash within the knob changed function to reduce the number of times a component is rendered when the user is typing. The knob changed functionality will only be called if there is a delay of 150ms(slightly faster than the average time between keypress) during user typing. The previous version re-rendered the component upon each keypress. This will help increase performance and is seen mostly when running large components within storybook.

For more information about this PR, please refer to #5376

How to test

• Is this testable with Jest or Chromatic screenshots? No
• Does this need a new example in the kitchen sink apps? No
• Does this need an update to the documentation? No

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[vercel]

You are pushing commits at a very fast pace (accross the whole organization).
Due to that, we cannot deploy the commit 429752a.

You can try again later or upgrade your plan.

[codecov]

Codecov Report

Merging #5811 into next will decrease coverage by 0.99%.
The diff coverage is 0%.

@@           Coverage Diff            @@
##             next    #5811    +/-   ##
========================================
- Coverage   34.97%   33.98%    -1%     
========================================
  Files         648      651     +3     
  Lines        9480     9477     -3     
  Branches     1360     1345    -15     
========================================
- Hits         3316     3221    -95     
- Misses       5534     5641   +107     
+ Partials      630      615    -15

Impacted Files	Coverage Δ
addons/knobs/src/registerKnobs.js	0% <0%> (ø)	⬆️
lib/theming/src/themes/dark.ts	0% <0%> (-100%)	⬇️
addons/notes/src/shared.ts	0% <0%> (-100%)	⬇️
lib/theming/src/animation.ts	0% <0%> (-100%)	⬇️
lib/theming/src/utils.ts	0% <0%> (-100%)	⬇️
lib/theming/src/themes/light.ts	0% <0%> (-100%)	⬇️
lib/theming/src/modules/syntax.ts	0% <0%> (-100%)	⬇️
lib/theming/src/base.ts	0% <0%> (-100%)	⬇️
lib/theming/src/create.ts	0% <0%> (-89.59%)	⬇️
lib/ui/src/libs/merge.js	36.36% <0%> (-45.46%)	⬇️
... and 24 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 10cb244...ca63d0e. Read the comment docs.

[shilman]

LGTM?

[shilman]

cc @ndelangen @tmeasday

[tmeasday]

This seems good, although I wonder if we should use debounce from lodash instead of the handrolled setTimeout method?

[CodeByAlex]

Good idea @tmeasday . I agree since Lodash is tried and true and is already being used in the project where debouncing occurs. I've pushed to the branch and updated the PR. Mind taking another look?

[tmeasday]

LGTM!