Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning: This synthetic event is reused for performance reasons #275

Closed
sukazavr opened this issue Dec 28, 2016 · 5 comments
Closed

Warning: This synthetic event is reused for performance reasons #275

sukazavr opened this issue Dec 28, 2016 · 5 comments
Labels

Comments

@sukazavr
Copy link

@sukazavr sukazavr commented Dec 28, 2016

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

image
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?

@zalmoxisus
Copy link
Owner

@zalmoxisus zalmoxisus commented Dec 28, 2016

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
Copy link
Owner

@zalmoxisus zalmoxisus commented Jan 3, 2017

@sukazavr, any update on this?

@sukazavr
Copy link
Author

@sukazavr sukazavr commented Jan 3, 2017

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

@NGuldager
Copy link

@NGuldager NGuldager commented Jan 6, 2017

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

@zalmoxisus
Copy link
Owner

@zalmoxisus zalmoxisus commented Jan 6, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.