davidkpiano / react-redux-form

Create forms easily in React with Redux.
https://davidkpiano.github.io/react-redux-form
MIT License
2.07k stars 251 forks source link

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

Open andrewmtam opened 4 years ago

andrewmtam commented 4 years ago

The Problem

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

Steps to Reproduce

Expected Behavior

Actual Behavior

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: https://github.com/davidkpiano/react-redux-form/blob/877b08ae9bee429095a4d3af3df6b52e9f60af95/src/components/form-component.js#L410-L413

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:

https://github.com/davidkpiano/react-redux-form/blob/877b08ae9bee429095a4d3af3df6b52e9f60af95/src/components/form-component.js#L430-L432

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

andrewmtam commented 4 years ago

Submitted a PR for the issue!