Merge pull request #1219 from andrewmtam/issue-1218

Clear form cache on `componentDidMount` instead of `mapStateToProps` (#1218)

Author: davidkpiano

src/components/control-component-factory.js

@@ -157,12 +157,6 @@ function createControlClass(s) {
       this.handleLoad();
     }
 
-    UNSAFE_componentWillReceiveProps({ modelValue }) {
-      if (modelValue !== this.props.modelValue) {
-        this.setViewValue(modelValue);
-      }
-    }
-
     shouldComponentUpdate(nextProps, nextState) {
       return !shallowEqual(this.props, nextProps, {
         deepKeys: ['controlProps'],
@@ -388,6 +382,13 @@ function createControlClass(s) {
       return this.props.getValue(event, this.props);
     }
 
+    /* eslint-disable camelcase */
+    UNSAFE_componentWillReceiveProps({ modelValue }) {
+      if (modelValue !== this.props.modelValue) {
+        this.setViewValue(modelValue);
+      }
+    }
+
     handleIntents() {
       const {
         model,

src/components/form-component.js

@@ -98,12 +98,7 @@ function createFormClass(s = defaultStrategy) {
       if (this.props.getDispatch) {
         this.props.getDispatch(this.props.dispatch);
       }
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps) {
-      if (containsEvent(nextProps.validateOn, 'change')) {
-        this.validate(nextProps);
-      }
+      clearGetFormCacheForModel(this.props.model);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -122,6 +117,13 @@ function createFormClass(s = defaultStrategy) {
       }
     }
 
+    /* eslint-disable camelcase */
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      if (containsEvent(nextProps.validateOn, 'change')) {
+        this.validate(nextProps);
+      }
+    }
+
     handleUpdate() {
       if (this.props.onUpdate) {
         this.props.onUpdate(this.props.formValue);
@@ -409,7 +411,6 @@ function createFormClass(s = defaultStrategy) {
 
   function mapStateToProps(state, { model }) {
     const modelString = getModel(model, state);
-    clearGetFormCacheForModel(modelString);
     const form = s.getForm(state, modelString);
 
     invariant(form,

test/form-component-spec.js

@@ -11,6 +11,7 @@ import sinon from 'sinon';
 
 import isValid from '../src/form/is-valid';
 import { defaultTestContexts, testCreateStore, testRender } from './utils';
+import { clearGetFormCache } from '../src/utils/get-form';
 
 import {
   Form as _Form,
@@ -69,6 +70,10 @@ Object.keys(testContexts).forEach((testKey) => {
   const combineForms = testContext.combineForms;
 
   describe(`<Form> component (${testKey} context)`, () => {
+    beforeEach(() => {
+      clearGetFormCache();
+    });
+
     describe('wraps component if specified', () => {
       const store = testCreateStore({
         testForm: formReducer('test', object),

yarn.lock

@@ -2588,6 +2588,11 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
 js-yaml@^3.5.1:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
@@ -2719,7 +2724,7 @@ loader-utils@^1.0.2:
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
-lodash-es@^4.17.5, lodash-es@^4.2.1:
+lodash-es@^4.17.5:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.10.tgz#62cd7104cdf5dd87f235a837f0ede0e8e5117e05"
 
@@ -2792,7 +2797,7 @@ lodash.words@^3.0.0:
   dependencies:
     lodash._root "^3.0.0"
 
-lodash@^4.0.0, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@~4.17.2:
+lodash@^4.0.0, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0, lodash@~4.17.2:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
@@ -2810,6 +2815,13 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   dependencies:
     js-tokens "^3.0.0"
 
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 lru-cache@2:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952"
@@ -3745,14 +3757,13 @@ redux-thunk@^2.0.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
 
-redux@^3.3.1:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
+redux@^4.0.0:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
+  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
   dependencies:
-    lodash "^4.2.1"
-    lodash-es "^4.2.1"
-    loose-envify "^1.1.0"
-    symbol-observable "^1.0.3"
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
 
 regenerate@^1.2.1:
   version "1.3.3"
@@ -4187,9 +4198,10 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
-symbol-observable@^1.0.3:
+symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
 symbol-tree@^3.2.1:
   version "3.2.2"