Redux-devtools-extension: Warning: This synthetic event is reused for performance reasons

[sukazavr]

If Redux DevTools 2.11.1.1 are enabled, runtime shows the Errors:

etc...

Versions of packages

Redux DevTools 2.11.1.1
[email protected]
[email protected]
[email protected]

Use case

import env from 'utils/env'
import { createStore, applyMiddleware, compose } from 'redux'
import createSagaMiddleware from 'redux-saga'

const sagaMiddleware = createSagaMiddleware()

const middleware = [ sagaMiddleware ]

let composeEnhancers = compose

// Support Redux DevTools Extension
if (env.isDev && typeof window === 'object') {

    const RDTEC = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

    if (RDTEC) {

        composeEnhancers = RDTEC({
            // Specify here name, actionsBlacklist, actionsCreators and other options
        })
    }
}

const enhancer = composeEnhancers(
    applyMiddleware(...middleware),
    // other store enhancers if any
)

export default (rootReducer, preloadedState) => {

    rootReducer = rootReducer || function (state) { return state }
    preloadedState = preloadedState || {}

    const store = createStore(rootReducer, preloadedState, enhancer)

    return {
        ...store,
        runSaga: sagaMiddleware.run
    }
}

How to fix it?

[zalmoxisus]

The extension doesn't affect React components in any way, unless you have something wrong in the actions passed to the components. So the problem is certainly elsewhere. Maybe you're including also vanilla Redux DevTools component? Could you provide a minimal repo or to modify our example to replicate the issue?

[zalmoxisus]

@sukazavr, any update on this?

[sukazavr]

@zalmoxisus i'll take a look on the issue after 5th January :-)

[NGuldager]

I just had this problem myself. I found that my issue was that I passed the synthetic event directly in my action payload.

[zalmoxisus]

@NGuldager thanks for the clarification.

In this case we're accessing the event to show it in the monitor. As stated in the warning message from React, the synthetic event cannot be reused for performance reason.

If you still need to pass it to an action, you can override this key of the stringified payload in your action creator, by adding a custom toJSON function (which will be called by the extension before accessing the object):

function increment(event) {
  return {
    type: INCREMENT_COUNTER,
    event,
+   toJSON: function (){
+     return { ...this, event: '[Event]' };
+   }
  };
}

Note that it shouldn't be arrow function as we want to have access to the function's this.

As we don't have access to the original object, skipping and recomputing actions during hot reloading will not work in this case. So better to use the required value from the event than the whole event object.