The entire component is redrawn when props are changed in the "Docs" section

[schoonc]

Describe the bug
The entire component is redrawn when properties are changed in the "Docs" section.

To Reproduce
Steps to reproduce the behavior:

1. git clone https://github.com/schoonc/test-storybook-vue-docs-render
2. npm i
3. npm run storybook
4. Change the prop in "Canvas" section. We see that the color of the element changes smoothly (storybook changes only the class of the element).
5. Change the prop in "Docs" section. We see that the color of the element changes immediately (storybook completely redraws the element).

Expected behavior
The component must not be completely redrawn.

Screenshots

Code snippets
dependencies in the package.json:

"devDependencies": {
    "@babel/core": "^7.11.6",
    "@storybook/addon-actions": "^6.0.25",
    "@storybook/addon-essentials": "^6.0.25",
    "@storybook/addon-links": "^6.0.25",
    "@storybook/vue": "^6.0.25",
    "babel-loader": "^8.1.0",
    "react-is": "^16.13.1"
  },
  "dependencies": {
    "vue": "^2.6.12",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12"
  },

.storybook/main.js:

module.exports = {
  "stories": [
    "../stories/**/*.stories.js"
  ],
  "addons": [
    "@storybook/addon-essentials"
  ]
}

stories/testdiv.css:

.testdiv {
  background: blue;
  transition: all 1s;
}
.testdiv-red {
  background: red;
}

stories/Testdiv.stories.js:

import Testdiv from './Testdiv.vue';

export default {
  title: 'testdiv',
  component: Testdiv,
};

export const Default = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Testdiv },
  template: '<testdiv v-bind="$props" />',
})

stories/Testdiv.vue:

<template>
  <div class="testdiv" :class="{'testdiv-red': red}">TEST</div>
</template>

<script>
import './testdiv.css';

export default {
  name: 'testdiv',

  props: {
    red: Boolean
  },
};
</script>

System

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 AMD Ryzen 5 3550H with Radeon Vega Mobile Gfx
  Binaries:
    Node: 12.18.4 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.6 - /usr/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 81.0

It would be interesting to know the reason for such behavior. And if it is technically justified (e.g. technically difficult to implement at the moment), it would be cool to describe this behavior in documentation.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[as-zlynn-philipps]

On my end, the Canvas is taking about 5 seconds to re-render after a prop is changed in ArgsTable on DocsPage.

[as-zlynn-philipps]

^ should specify that's if there are like 12 stories on the page, which I have. With just one story, the re-render is instantaneous even in dev mode.

[shilman]

@as-zlynn-philipps this should help a lot #14002

can you please upgrade to the beta and let me know what you see?

npx sb upgrade --prerelease

[as-zlynn-philipps]

@shilman thanks! Tested and counted this time. Seems like it's taking 1-11 seconds to re-render in dev mode with several stories on each prop change. I can't discern any rhyme or reason for the different lag times.

[wfischer42]

I'm experiencing the original issue. Nothing to do with lag, it just makes storybook unhelpful for certain kinds of components.

For example, a component that uses css transitions to animate state changes can't be tested in storybook because it's redrawn when props are changed. The redraw first resets everything to default values, then applies the new prop value, so there's a jump where there should be a transition.

[AndreiSoroka]

hi, any updates?

[ChrisPlease]

Still seeing this in 6.5.10