High memory issues when using Redux DevTools

[brendanluna]

Griddle version

1.10.1

Expected Behavior

726 added Redux DevTools extension to the internal Griddle middleware to allow tracking of Griddle's internal actions. This should allow us to view Griddle's actions when used with the Redux DevTools extension.

Actual Behavior

When I try to view any of the actions after table changes like sorting a column, Redux DevTool's memory spikes sharply up to 1GB-3GB of memory, and > 100% CPU in Chrome Task Manager. This eventually results in me having to restart the Redux DevTools extension.

I do not experience this when using Redux DevTools with my own app's middleware, and generally it's pretty performant.

Steps to reproduce

I've setup my table pretty closely modeled after the External Controlled Griddle example, with a few extra elements:

        <Griddle
          storeKey='griddleStore'
          plugins={plugins.localPlugin}
          styleConfig={{
            icons: {
              TableHeadingCell: {
                sortDescendingIcon: <span className="griddle-heading-descending">↓</span>,
                sortAscendingIcon: <span className="griddle-heading-ascending">↑</span>,
              },
            },
          }}
          data={this.props.items}
          pageProperties={{
            currentPage,
            pageSize,
            recordCount,
          }}
          sortProperties={this.state.sortProperties}
          events={{
            onNext: this._onNext,
            onPrevious: this._onPrevious,
            onSort: this._onSort,
            onGetPage: this._onGetPage,
            onFilter: debounce(this._onFilter, 300),
          }}
          components={{
            Filter,
            Pagination: components.PageDropdownContainer(Pagination),
            SettingsToggle: () => <span />,
            NoResults: () => this.renderNoResults(),
            Loading: () => this.renderLoading(),
          }}>

Taking an action on the table like sorting a single column, will immediately spike the memory. I'm also not sure if this is normal, but sorting a single column results in 3 GRIDDLE_UPDATE_STATE actions being fired off.

[filippomc]

Probably related: I have an app which uses griddle and also uses redux and the devtools: the devtools also tracking the Griddle state causing big spikes in memory and crashes. It would be nice to be able to turn off the tracking in some way.