[Addon: Knobs] - Performance Bug - Component within the iframe is being re-rendered upon each change of a knob - V4 and V5

[CodeByAlex]

Describe the bug
The component within the iframe is being re-rendered upon each change of a knob. This is a large performance issue seen especially when using knobs with large components that include other components. The visual issue is that a lag is introduced because the rendering is slower than the changes being made to the knobs by the user.
See comments below for more information: #4740 (comment)
#4740 (comment)

To Reproduce
Steps to reproduce the behavior:
Include the knobs addon. Create a component with storybook configuration and change a knob quickly when viewing it in the iframe. This can be seen in the angular cli example.

Expected behavior
I expect the component to not get rerendered until after the user has finished typing or changing the knob. Even better would be if the inputs/props were the only modification on the component rather than the entire component being re-rendered. Debouncing might be a good option here for the former solution.

Screenshots
the gif below shows the lag that is introduced because the rendering is slower than the change being made
https://user-images.githubusercontent.com/1235821/48129367-96035d80-e289-11e8-848b-8523053c3450.gif
See gif of the issue here: #4740

System:

• Framework: Angular (but I dont believe this is angular specific)
• Addons: Knobs
• Version: V4 through V5.0.0-alpha.9

Additional context
I have tried to use the timestamp functionality but that does not seem to solve the issue.

Potential solution for knobChanged function:

function knobChanged(change) {
    clearTimeout(this.timeoutId);
    this.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);

    knobOptions.value = value;
    knobStore.markAllUnused();

    forceReRender();
    }, DEBOUNCE_DELAY) // this is an arbitrary amount of time used to ensure that the user has time 
  to type before re-rendering
}

[amathm]

I have had this same problem; it is not even a problem with the size of the component being rendered, but rather how knob settings force a re-rendering of the displayed component Iframe on change.

what's CodeByAlex suggested:

function knobChanged(change) {
clearTimeout(this.timeoutId);
this.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);

knobOptions.value = value;
knobStore.markAllUnused();

forceReRender();
}, DEBOUNCE_DELAY) // this is an arbitrary amount of time used to ensure that the user has time 

to type before re-rendering
}

Seems a good solution to the problem if implemented, or just allow changes to be submitted once editing of the knobs is done, and then on submit re-render the component Iframe; as an alternative to interpolating the binded data, on change, to the component Iframe for re rendering.

The functionality of seeing the changes to the knobs on change is great for smaller components, storybook presentation and for end users who are none developers to be able to edit (it more accessible) but the larger the component the greater the need to have control of the component Iframe re-rendering, for performance, for efficiency during development and for quicker prototyping.

My problem has been with storybook v4 and above, on angular as well.

- "@storybook/addon-a11y": "4.0.0-alpha.25",
-     "@storybook/addon-actions": "^4.1.4",
-     "@storybook/addon-console": "^1.1.0",
-     "@storybook/addon-knobs": "4.2.0-alpha.7",
-     "@storybook/addon-notes": "^4.1.4",
-     "@storybook/addon-viewport": "4.2.0-alpha.7",
-     "@storybook/addons": "4.2.0-alpha.7",
-     "@storybook/angular": "4.2.0-alpha.7",
-     "@storybook/cli": "4.2.0-alpha.7",

I hope a fix is implemented for this.

[CodeByAlex]

@igor-dv , have you been seeing this performance issue. I believe that I read that you were one of the Angular cli maintainers.

[shilman]

@CodeByAlex is this addressed by #5753 ?

I'm releasing that now in rc.7

[CodeByAlex]

@shilman it may be, once released, I’ll check and comment below

[CodeByAlex]

@shilman the build failed and it looks like its because: WARN => Failed to get angular-cli webpack config. Nothing changed on my end but it now looks like the project cant resolve the different parts of the monorepo. May have to raise an issue.

[CodeByAlex]

@shilman @igor-dv I was able to install v7 for all projects other than @storybook/angular. I noticed the knobs change referenced in #5753 was in the code as seen in the browser console below:

However, I am still seeing the issue described above. On every keystroke the component is being initialized and destroyed. For simple components this isnt an issue but for more complex ones or components that require a lot of painting, it is significant.
Below is a capture of what I am seeing:

At the bottom right of the screen, you can see the number of inits in the console increase. It eventually increases to 43 matches which is the same amount as the number of characters in the input field.

Ill take this issue on and put out a PR

[shilman]

Crikey!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.1 containing PR #5811 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Olé!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.1 containing PR #5811 that references this issue. Upgrade today to try it out!