question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Synthetic Events get lost through an Action

See original GitHub issue

I have a Store Action that gets triggered on an input field onChange (it’s a type="file" input), I need the event in order to get the target’s values, but triggering a Store Action on onChange gets the event killed on the way.

warning.js:36 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

Shouldn’t actions be synchronous operation? Unless specified otherwise?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:12 (12 by maintainers)

github_iconTop GitHub Comments

3reactions
BryanGrezeszakcommented, Jan 6, 2017

My general thoughts on bumping major version is that you should have a pretty good reason to do so, because anytime you do something backward-breaking like that you tick off a number of people that don’t like change. So the benefit of the backward-breaking change has to outweigh its own cost.

Been debating on whether this sync change balances that equation or not.

…though eek’s point about redux users is a good one…I think that tips scales enough to be worth the major change.

I’ll start looking at what might need to be done to make actions sync by default (except for actions with child-actions).

1reaction
BryanGrezeszakcommented, Jan 19, 2017

Well, the store is automatically created during componentWillMount.

So there’s two main options. Move your action call after that, or create your store before that.

So you could do your action call in the componentWillMount, after you super call. Or do it async to push the action to the event loop like you were doing (though, like I said…be careful with that…I don’t think there’s any reason React couldn’t one day just make there be time between constructor and mount, in which case that would make a race issue).

Or, (I think) the more elegant way to do things, if you know you’re gonna use actions before components mount, then you can just not wait for the store to be made automatically, and call Reflux.initStore(MyStoreClass);. You can probably just put it at the end of the store class itself.

Read more comments on GitHub >

github_iconTop Results From Across the Web

SyntheticEvent - React
The synthetic events are different from, and do not map directly to, ... because this input lost focus'); }} placeholder="onBlur is triggered when...
Read more >
Handling React Events - A Detailed Guide - KnowledgeHut
Synthetic event is reused for performance reasons in the browser, A synthetic event is a cross-browser wrapper around the browser's native event ......
Read more >
Event Bubbling and Event Catching in JavaScript and React
React, on the other hand, has created something called the SyntheticEvent. These are simply wrappers for the browser's event object. The basic ...
Read more >
Event Handler on React Component not invoked ... - GitHub
A React Component with an Event Handler (for example onClick) is rendered inside ... using those native events, instead of synthetic events.
Read more >
How To Handle DOM and Window Events with React
In web development, events represent actions that happen in the web browser. ... The API for SyntheticEvent is similar to the native Event...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found