Merge pull request #5811 from CodeByAlex/performance-fix-knob-change-…

…debouncing

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

addons/knobs/package.json

@@ -30,6 +30,7 @@
     "escape-html": "^1.0.3",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",
+    "lodash.debounce": "^4.0.8",
     "prop-types": "^15.6.2",
     "qs": "^6.5.2",
     "react-color": "^2.17.0",

addons/knobs/src/registerKnobs.js

@@ -1,11 +1,13 @@
 import addons from '@storybook/addons';
 import { STORY_CHANGED, FORCE_RE_RENDER, REGISTER_SUBSCRIPTION } from '@storybook/core-events';
 
+import debounce from 'lodash.debounce';
 import KnobManager from './KnobManager';
 import { CHANGE, CLICK, RESET, SET } from './shared';
 
 export const manager = new KnobManager();
 const { knobStore } = manager;
+const KNOB_CHANGED_DEBOUNCE_DELAY_MS = 150;
 
 function forceReRender() {
   addons.getChannel().emit(FORCE_RE_RENDER);
@@ -16,7 +18,8 @@ function setPaneKnobs(timestamp = +new Date()) {
   channel.emit(SET, { knobs: knobStore.getAll(), timestamp });
 }
 
-function knobChanged(change) {
+// Increased performance by reducing the number of times a component is rendered during knob changes
+const debouncedOnKnobChanged = debounce(change => {
   const { name, value } = change;
 
   // Update the related knob and it's value.
@@ -26,6 +29,10 @@ function knobChanged(change) {
   knobStore.markAllUnused();
 
   forceReRender();
+}, KNOB_CHANGED_DEBOUNCE_DELAY_MS);
+
+function knobChanged(change) {
+  debouncedOnKnobChanged(change);
 }
 
 function knobClicked(clicked) {