From eaa6b3cc4e08ff167f72f7d6d1b2a5ca4933404f Mon Sep 17 00:00:00 2001 From: Olcay Konuskan Date: Wed, 20 Apr 2016 11:43:19 +0200 Subject: [PATCH 1/5] fix for re-render issue This worked for me. I'm no longer experiencing re-renders caused bu actions. --- src/client/ui/preview.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/client/ui/preview.js b/src/client/ui/preview.js index b7d2e97943f8..8fd001d3b3ba 100644 --- a/src/client/ui/preview.js +++ b/src/client/ui/preview.js @@ -6,6 +6,8 @@ import { } from '../'; const rootEl = document.getElementById('root'); +const previousKind = ''; +const previousStory = ''; export function renderError(data, error) { // We always need to render redbox in the mainPage if we get an error. @@ -26,11 +28,15 @@ export function renderMain(data) { return ReactDOM.render(noPreview, rootEl); } - // 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/kadirahq/react-storybook/issues/81 - ReactDOM.unmountComponentAtNode(rootEl); + 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/kadirahq/react-storybook/issues/81 + previousKind = selectedKind; + previousStory = selectedStory; + ReactDOM.unmountComponentAtNode(rootEl); + } return ReactDOM.render(story(), rootEl); } From 2beae5e474ccf0f5b6641760765005e07d32ca08 Mon Sep 17 00:00:00 2001 From: Olcay Konuskan Date: Wed, 20 Apr 2016 12:39:38 +0200 Subject: [PATCH 2/5] changed const to let --- src/client/ui/preview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/ui/preview.js b/src/client/ui/preview.js index 8fd001d3b3ba..c6f3e163a756 100644 --- a/src/client/ui/preview.js +++ b/src/client/ui/preview.js @@ -6,8 +6,8 @@ import { } from '../'; const rootEl = document.getElementById('root'); -const previousKind = ''; -const previousStory = ''; +let previousKind = ''; +let previousStory = ''; export function renderError(data, error) { // We always need to render redbox in the mainPage if we get an error. From 67124d2777dc32056e3562854f72ed20e613363c Mon Sep 17 00:00:00 2001 From: Olcay Konuskan Date: Wed, 20 Apr 2016 12:46:37 +0200 Subject: [PATCH 3/5] added comment and reference to issue --- src/client/ui/preview.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/client/ui/preview.js b/src/client/ui/preview.js index c6f3e163a756..fa5e710b749c 100644 --- a/src/client/ui/preview.js +++ b/src/client/ui/preview.js @@ -27,7 +27,10 @@ export function renderMain(data) { if (!story) { return ReactDOM.render(noPreview, rootEl); } - + + // Unmount the previous story only if selectedKind or selectedStory has changed. + // renderMain() gets executed after each action. Actions will cause the whole store to re-render without this check. + // https://github.com/kadirahq/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. From b5a4ce77ba3d4fecfe17314dedd4464f5db98b31 Mon Sep 17 00:00:00 2001 From: Olcay Konuskan Date: Wed, 20 Apr 2016 12:47:27 +0200 Subject: [PATCH 4/5] fixed typo --- src/client/ui/preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/ui/preview.js b/src/client/ui/preview.js index fa5e710b749c..52689e565e95 100644 --- a/src/client/ui/preview.js +++ b/src/client/ui/preview.js @@ -29,7 +29,7 @@ export function renderMain(data) { } // Unmount the previous story only if selectedKind or selectedStory has changed. - // renderMain() gets executed after each action. Actions will cause the whole store to re-render without this check. + // renderMain() gets executed after each action. Actions will cause the whole story to re-render without this check. // https://github.com/kadirahq/react-storybook/issues/116 if (selectedKind !== previousKind || previousStory !== selectedStory) { // We need to unmount the existing set of components in the DOM node. From f1510b4ec2d92fa271db2278bdc8746310acc025 Mon Sep 17 00:00:00 2001 From: Olcay Konuskan Date: Wed, 20 Apr 2016 12:50:48 +0200 Subject: [PATCH 5/5] code style --- src/client/ui/preview.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/client/ui/preview.js b/src/client/ui/preview.js index 52689e565e95..d33039928d7b 100644 --- a/src/client/ui/preview.js +++ b/src/client/ui/preview.js @@ -27,9 +27,10 @@ export function renderMain(data) { if (!story) { return ReactDOM.render(noPreview, rootEl); } - + // Unmount the previous story only if selectedKind or selectedStory has changed. - // renderMain() gets executed after each action. Actions will cause the whole story to re-render without this check. + // renderMain() gets executed after each action. Actions will cause the whole + // story to re-render without this check. // https://github.com/kadirahq/react-storybook/issues/116 if (selectedKind !== previousKind || previousStory !== selectedStory) { // We need to unmount the existing set of components in the DOM node.