From 6ff2e3800345bd0d6a0f2ddf9afdccad7b8e7212 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 7 Oct 2017 00:54:46 +0700
Subject: [PATCH] Little Optimization

---
 .../routes/Configure/containers/Configure.js   | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/routes/Configure/containers/Configure.js b/client/coral-admin/src/routes/Configure/containers/Configure.js
index 5ca75e803..4146c4ffe 100644
--- a/client/coral-admin/src/routes/Configure/containers/Configure.js
+++ b/client/coral-admin/src/routes/Configure/containers/Configure.js
@@ -18,6 +18,12 @@ import Configure from '../components/Configure';
 
 class ConfigureContainer extends Component {
 
+  // Merge current settings with pending settings.
+  getMergedSettings = (props = this.props) => merge({}, props.root.settings, props.pending);
+
+  // Cached merged settings.
+  mergedSettings = this.getMergedSettings();
+
   savePending = async () => {
     try {
       await this.props.updateSettings(this.props.pending);
@@ -28,19 +34,25 @@ class ConfigureContainer extends Component {
     }
   };
 
+  componentWillReceiveProps(nextProps) {
+
+    // Recalculate merged settings when necessary.
+    if (this.props.root.settings !== nextProps.root.settings || this.props.pending !== nextProps.pending) {
+      this.mergedSettings = this.getMergedSettings(nextProps);
+    }
+  }
+
   render () {
     if(this.props.data.loading) {
       return <Spinner/>;
     }
 
-    const merged = merge({}, this.props.root.settings, this.props.pending);
-
     return <Configure
       notify={this.props.notify}
       auth={this.props.auth}
       data={this.props.data}
       root={this.props.root}
-      settings={merged}
+      settings={this.mergedSettings}
       canSave={this.props.canSave}
       savePending={this.savePending}
       setActiveSection={this.props.setActiveSection}