react-redux-form performance is slow when redux store is large

[andrewmtam]

The Problem

When using react-redux-form inside of a large redux store, form performance is slow.

Steps to Reproduce

• Create a /large/ redux store

Expected Behavior

• The form should be fast to process changes

Actual Behavior

• The form is very slow to process changes

Reproducible Code Example

https://codepen.io/nyknicksfan10033/pen/KKpGBNj?editors=0010

Additional Information

Previously, our codebase had been using version 1.16.5 of react-redux-form, and we had no issues with performance.

When we attempted to upgrade to the latest version, 1.16.14, we saw a great deal of performance issues.

After debugging a little, it seems that the culprit is here:

react-redux-form/src/components/form-component.js

Lines 410 to 413 in 877b08a

	function mapStateToProps(state, { model }) {
	const modelString = getModel(model, state);
	clearGetFormCacheForModel(modelString);
	const form = s.getForm(state, modelString);

Starting with release 1.16.11, the library started calling clearGetFormCacheForModel within the mapStateToProps method of the Form component.

Because mapStateToProps gets called anytime an action is dispatched, the formKey cache is constantly getting cleared.

Without the cache, the way the form key is determined is by iterating through keys of the store, which gets progressively not-performant as the size of the store grows.

I'll look into putting up a PR to address the issue. My immediate thought is to expose createFormClass here:

react-redux-form/src/components/form-component.js

Lines 430 to 432 in 877b08a

	export {
	createFormClass,
	};

in the index.js file, and provide options to /not/ clear the cache on every render, but any thoughts / feedback is welcome. Thanks!

[andrewmtam]

Submitted a PR for the issue!