diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index 7188b85acaa6..f65c1dace064 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -31,6 +31,7 @@
     "escape-html": "^1.0.3",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",
+    "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2",
     "qs": "^6.6.0",
     "react-color": "^2.17.0",
diff --git a/addons/knobs/src/registerKnobs.js b/addons/knobs/src/registerKnobs.js
index 687f7d59a341..67d2208d374a 100644
--- a/addons/knobs/src/registerKnobs.js
+++ b/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) {