From 429752a546d8929b1fa25f46bca140b497361482 Mon Sep 17 00:00:00 2001 From: CodeByAlex Date: Fri, 1 Mar 2019 11:17:54 -0500 Subject: [PATCH 1/3] added debouncing at 155ms between each keypress before the forceReRender function is called --- addons/knobs/src/registerKnobs.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/addons/knobs/src/registerKnobs.js b/addons/knobs/src/registerKnobs.js index 687f7d59a341..8705cfe096e6 100644 --- a/addons/knobs/src/registerKnobs.js +++ b/addons/knobs/src/registerKnobs.js @@ -6,6 +6,8 @@ import { CHANGE, CLICK, RESET, SET } from './shared'; export const manager = new KnobManager(); const { knobStore } = manager; +const KNOB_CHANGED_DEBOUNCE_DELAY_MS = 155; // approximate average time between keypresses +let timeoutId = null; function forceReRender() { addons.getChannel().emit(FORCE_RE_RENDER); @@ -17,15 +19,19 @@ function setPaneKnobs(timestamp = +new Date()) { } function knobChanged(change) { - const { name, value } = change; + clearTimeout(timeoutId); + timeoutId = setTimeout(() => { + // debouncing occurs here to increase performance + const { name, value } = change; - // Update the related knob and it's value. - const knobOptions = knobStore.get(name); + // Update the related knob and it's value. + const knobOptions = knobStore.get(name); - knobOptions.value = value; - knobStore.markAllUnused(); + knobOptions.value = value; + knobStore.markAllUnused(); - forceReRender(); + forceReRender(); + }, DEBOUNCE_DELAY_MS); // amount of time used to ensure that the user has time to type before re-rendering } function knobClicked(clicked) { From c15e07a646eb863dab9fe27f788e69a2cb611e00 Mon Sep 17 00:00:00 2001 From: CodeByAlex Date: Fri, 1 Mar 2019 19:18:58 -0500 Subject: [PATCH 2/3] edited variable name --- addons/knobs/src/registerKnobs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/knobs/src/registerKnobs.js b/addons/knobs/src/registerKnobs.js index 8705cfe096e6..9e14eb46ac3c 100644 --- a/addons/knobs/src/registerKnobs.js +++ b/addons/knobs/src/registerKnobs.js @@ -31,7 +31,7 @@ function knobChanged(change) { knobStore.markAllUnused(); forceReRender(); - }, DEBOUNCE_DELAY_MS); // amount of time used to ensure that the user has time to type before re-rendering + }, KNOB_CHANGED_DEBOUNCE_DELAY_MS); // amount of time used to ensure that the user has time to type before re-rendering } function knobClicked(clicked) { From 8aa71c5382d47dac06d101344efacc9d3234a8fa Mon Sep 17 00:00:00 2001 From: codebyalex Date: Thu, 7 Mar 2019 00:37:57 -0500 Subject: [PATCH 3/3] modified debounce logic to use lodash rather than custom timeout code --- addons/knobs/package.json | 1 + addons/knobs/src/registerKnobs.js | 27 ++++++++++++++------------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/addons/knobs/package.json b/addons/knobs/package.json index 15f727d14c51..9afc41f926c7 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.6.2", "qs": "^6.5.2", "react-color": "^2.17.0", diff --git a/addons/knobs/src/registerKnobs.js b/addons/knobs/src/registerKnobs.js index 9e14eb46ac3c..67d2208d374a 100644 --- a/addons/knobs/src/registerKnobs.js +++ b/addons/knobs/src/registerKnobs.js @@ -1,13 +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 = 155; // approximate average time between keypresses -let timeoutId = null; +const KNOB_CHANGED_DEBOUNCE_DELAY_MS = 150; function forceReRender() { addons.getChannel().emit(FORCE_RE_RENDER); @@ -18,20 +18,21 @@ function setPaneKnobs(timestamp = +new Date()) { channel.emit(SET, { knobs: knobStore.getAll(), timestamp }); } -function knobChanged(change) { - clearTimeout(timeoutId); - timeoutId = setTimeout(() => { - // debouncing occurs here to increase performance - const { name, value } = 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. + const knobOptions = knobStore.get(name); - // Update the related knob and it's value. - const knobOptions = knobStore.get(name); + knobOptions.value = value; + knobStore.markAllUnused(); - knobOptions.value = value; - knobStore.markAllUnused(); + forceReRender(); +}, KNOB_CHANGED_DEBOUNCE_DELAY_MS); - forceReRender(); - }, KNOB_CHANGED_DEBOUNCE_DELAY_MS); // amount of time used to ensure that the user has time to type before re-rendering +function knobChanged(change) { + debouncedOnKnobChanged(change); } function knobClicked(clicked) {