Warning: This synthetic event is reused for performance reasons

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

etc…

Versions of packages

Redux DevTools 2.11.1.1
react@15.4.1
redux@3.6.0
redux-saga@0.14.0

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?

[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.