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

Comments

Projects
None yet
3 participants
@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

This comment has been minimized.

Show comment
Hide comment
@zalmoxisus

zalmoxisus Dec 28, 2016

Owner

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?

Owner

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

This comment has been minimized.

Show comment
Hide comment
@zalmoxisus

zalmoxisus Jan 3, 2017

Owner

@sukazavr, any update on this?

Owner

zalmoxisus commented Jan 3, 2017

@sukazavr, any update on this?

@sukazavr

This comment has been minimized.

Show comment
Hide comment
@sukazavr

sukazavr Jan 3, 2017

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

sukazavr commented Jan 3, 2017

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

@NGuldager

This comment has been minimized.

Show comment
Hide comment
@NGuldager

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

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

This comment has been minimized.

Show comment
Hide comment
@zalmoxisus

zalmoxisus Jan 6, 2017

Owner

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

Owner

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