Merge pull request #2503 from storybooks/tmeasday/remove-rendundant-r…

…eact-render

[SIGNIFICANT] Remove redundant render in react

app/react/src/client/preview/render.js

@@ -55,16 +55,18 @@ export function renderMain(data, storyStore) {
   // renderMain() gets executed after each action. Actions will cause the whole
   // story to re-render without this check.
   //    https://github.com/storybooks/react-storybook/issues/116
-  if (selectedKind !== previousKind || previousStory !== selectedStory) {
-    // We need to unmount the existing set of components in the DOM node.
-    // Otherwise, React may not recrease instances for every story run.
-    // This could leads to issues like below:
-    //    https://github.com/storybooks/react-storybook/issues/81
-    previousKind = selectedKind;
-    previousStory = selectedStory;
-    ReactDOM.unmountComponentAtNode(rootEl);
+  if (selectedKind === previousKind && previousStory === selectedStory) {
+    return null;
   }
 
+  // We need to unmount the existing set of components in the DOM node.
+  // Otherwise, React may not recrease instances for every story run.
+  // This could leads to issues like below:
+  //    https://github.com/storybooks/react-storybook/issues/81
+  previousKind = selectedKind;
+  previousStory = selectedStory;
+  ReactDOM.unmountComponentAtNode(rootEl);
+
   const context = {
     kind: selectedKind,
     story: selectedStory,

examples/cra-kitchen-sink/package.json

@@ -36,6 +36,7 @@
     "@storybook/addon-storyshots": "^3.3.0-alpha.4",
     "@storybook/addon-viewport": "^3.3.0-alpha.4",
     "@storybook/addons": "^3.3.0-alpha.4",
+    "@storybook/client-logger": "^3.3.0-alpha.4",
     "@storybook/components": "^3.3.0-alpha.4",
     "@storybook/react": "^3.3.0-alpha.4",
     "babel-jest": "^21.2.0",

examples/cra-kitchen-sink/src/components/LifecycleLogger.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { logger } from '@storybook/client-logger';
+
+function log(name) {
+  logger.info(`LifecycleLogger: ${name}`);
+}
+
+// A component that logs its lifecycle so we can check that things happen
+// the right number of times (i.e. we are using React properly)
+export default class LifecycleLogger extends Component {
+  constructor() {
+    super();
+    log('contructor');
+  }
+  componentWillMount() {
+    log('componentWillMount');
+  }
+  componentDidMount() {
+    log('componentDidMount');
+  }
+  componentWillReceiveProps() {
+    log('componentWillReceiveProps');
+  }
+  componentWillUpdate() {
+    log('componentWillUpdate');
+  }
+  componentDidUpdate() {
+    log('componentDidUpdate');
+  }
+  componentWillUnmount() {
+    log('componentWillUnmount');
+  }
+  componentDidCatch() {
+    log('componentDidCatch');
+  }
+  render() {
+    log('render');
+    return <div>Lifecycle methods are logged to the console</div>;
+  }
+}

examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot

@@ -1030,6 +1030,12 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
+exports[`Storyshots Lifecycle logging 1`] = `
+<div>
+  Lifecycle methods are logged to the console
+</div>
+`;
+
 exports[`Storyshots Some really long story kind description with text 1`] = `
 <div
   style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;overflow:auto"

examples/cra-kitchen-sink/src/stories/index.stories.js

@@ -10,6 +10,7 @@ import { Button } from '@storybook/react/demo';
 
 import App from '../App';
 import Container from './Container';
+import LifecycleLogger from '../components/LifecycleLogger';
 
 const InfoButton = () => (
   <span
@@ -88,3 +89,6 @@ storiesOf('App', module).add('full app', () => <App />);
 storiesOf('Some really long story kind description', module)
   .addDecorator(centered)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
+
+storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);
+