[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/src/components/LifecycleLogger.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+
+function log(name) {
+  console.log(`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/index.stories.js

@@ -13,6 +13,7 @@ import { Button } from '@storybook/react/demo';
 import App from '../App';
 import Logger from './Logger';
 import Container from './Container';
+import LifecycleLogger from '../components/LifecycleLogger';
 
 const EVENTS = {
   TEST_EVENT_1: 'test-event-1',
@@ -102,6 +103,8 @@ 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 />);
+
 storiesOf('WithEvents', module)
   .addDecorator(getStory => (
     <WithEvents