Add warning when reading from event which has been returned to the pool #5940

kentcdodds · 2016-01-29T18:48:39Z

This is a WIP. I just want to make sure that I'm headed in the right direction for solving #5939

I'm not certain where the logic for deconstructing SyntheticEvents occurs. My guess is it's an abstraction that utilizes the EventInterface.

Also, what's the proper way to reference NODE_ENV for doing this only in development mode.

Thank you for helping a newbie to the codebase :-)

gaearon · 2016-01-29T18:51:24Z

Rather than throw, I think it should generate a warning.
Here is a another work-in-progress PR you can use as a reference: #5744

gaearon · 2016-01-29T18:54:13Z

I think these lines might be relevant:

react/src/renderers/dom/client/syntheticEvents/SyntheticEvent.js

Lines 160 to 162 in 9c3f595

    
           for (var propName in Interface) { 
        
             this[propName] = null; 
        
           }

kentcdodds · 2016-01-29T18:54:20Z

Rather than throw, I think it should generate a warning.

Ah, yes, that's right. Thanks for the reference 👍

facebook-github-bot · 2016-01-29T19:37:20Z

@kentcdodds updated the pull request.

zpao · 2016-01-29T19:40:26Z

src/renderers/dom/client/syntheticEvents/__tests__/SyntheticEvent-test.js

+    expect(console.error.calls.length).toBe(1);
+    expect(console.error.argsForCall[0][0]).toBe(
+      'Warning: This synthetic event is reused for performance reasons. If ' +
+      'you\'re seeing this, you\'re accessing a propertie on a ' +


"property" :)

zpao · 2016-01-29T19:46:05Z

https://github.com/facebook/react/blob/master/src/shared/utils/PooledClass.js#L102-L111 is another place to look. That's what get's run to add pooling to a class, generating a new class with a static release method which calls the destructor (as @gaearon linked to).

gaearon · 2016-01-29T19:51:23Z

Another thing is you might want to put the warning code into a “devtool” which is a new work-in-progress API for doing dev-only things. See 251d6c3 and #5590 for inspiration.

zpao · 2016-01-29T19:55:58Z

Might be tricky as a "devtool" since you need to add getters, which doesn't fit so well into the devtool event framework (at least as I understand it). Definitely work looking into though

kentcdodds · 2016-01-29T20:05:23Z

Updated. This is technically working, but there are some potential issues that I'll add some inline comments about.

kentcdodds · 2016-01-29T20:06:17Z

src/renderers/dom/client/syntheticEvents/__tests__/SyntheticEvent-test.js

  it('should warn if the synthetic event has been released when calling `preventDefault`', function() {
    spyOn(console, 'error');
    var syntheticEvent = createEvent({});
    SyntheticEvent.release(syntheticEvent);
    syntheticEvent.preventDefault();
-    expect(console.error.calls.length).toBe(1);
-    expect(console.error.argsForCall[0][0]).toBe(
+    expect(console.error.calls.length).toBe(3); // once each for setting `defaultPrevented`, accessing `nativeEvent`, and accessing `preventDefault`


When calling preventDefault, we set the defaultPrevented access the nativeEvent properties. This leads to three warnings even if the developer only called preventDefault.

kentcdodds · 2016-01-29T20:09:34Z

On possible suggestion is to set a property on the event called _nullified or _released and check for that before trying to access any properties.

facebook-github-bot · 2016-01-29T20:09:43Z

@kentcdodds updated the pull request.

kentcdodds · 2016-01-29T20:14:40Z

Heh... Still got some work on this, I've got quite a few failing tests in the full test suite and some odd behavior in the stopPropogation test (looks like console.error is called 14 times with my warning for some reason).

kentcdodds · 2016-01-29T20:18:38Z

I think the problem is that when we restore an event, we need to re-defineProperty the object (only in __DEV__) otherwise it will run through my getter/setter and log the warning.

Let me know if that sounds wrong. I'll push what I've got so far for review and keep working on it

facebook-github-bot · 2016-01-29T20:23:52Z

@kentcdodds updated the pull request.

kentcdodds · 2016-01-29T20:31:18Z

Great. I'm ready for feedback now. All tests are passing. I have a linting question I'll add as an inline comment. I'm not solid on this approach, so definitely willing to make changes to how things work or the style of the code. 👍

kentcdodds · 2016-01-29T20:33:00Z

src/renderers/dom/client/syntheticEvents/SyntheticEvent.js

+            warning(
+              warningCondition,
+              'This synthetic event is reused for performance reasons. If you\'re ' +
+              'seeing this, you\'re setting property `' + propName + '` on a ' +


I'm getting a linting error:

190:13 error The second argument to warning must be a string literal react-internal/warning-and-invariant-args

I think it's because of this line. Is there a reason I can't provide the propName here? I feel like it would be useful to have it.

Perhaps you're supposed to use %s there. Check out other warnings in the codebase.

I'd add a note about persist() just before the link so the user doesn't overlook the solution they likely need.

facebook-github-bot · 2016-01-29T20:38:48Z

@kentcdodds updated the pull request.

gaearon · 2016-01-29T21:06:05Z

src/renderers/dom/client/syntheticEvents/SyntheticEvent.js

+ * These are additional properties not in the EventInterface
+ * which are nulled when destructoring a syntheticEvent instance
+ */
+var otherNullableProps = ['dispatchConfig', '_targetInst', 'nativeEvent'];


dispatchConfig and _targetInst are both implementation details and are considered private fields.
I think we don't have to warn on accessing those.

This leaves us with nativeEvent which can be hardcoded as a special case below.

gaearon · 2016-01-30T12:28:02Z

src/renderers/dom/client/syntheticEvents/SyntheticEvent.js

@@ -195,3 +198,44 @@ SyntheticEvent.augmentClass = function(Class, Interface) {
 PooledClass.addPoolingTo(SyntheticEvent, PooledClass.fourArgumentPooler);

 module.exports = SyntheticEvent;
+
+
+// Utility functions


Nit: I don't think this comment is necessary. Do we use similar comments in the codebase?

gaearon · 2016-01-30T19:21:16Z

At this point I’ve given all feedback I could give, and what I see so far looks good, apart from minor nits above. Let’s wait for the maintainers to give their further comments. Thank you for contributing!

cc @jimfb

facebook-github-bot · 2016-01-30T20:04:41Z

@kentcdodds updated the pull request.

facebook-github-bot · 2016-01-30T20:09:42Z

@kentcdodds updated the pull request.

jimfb · 2016-02-11T05:43:03Z

src/renderers/dom/client/syntheticEvents/__tests__/SyntheticEvent-test.js

@@ -73,6 +73,7 @@ describe('SyntheticEvent', function() {
  });

  it('should be nullified if the synthetic event has called destructor', function() {
+    spyOn(console, 'error'); // accessing properties on destructored events logs warnings (tested elsewhere)


We should still assert the warnings here. The reason being that we want to know if we start emitting some unexpected warnings. Right now, this test just swallows all warnings.

That make sense. I felt odd spying on it and not asserting anything. Will do.

jimfb · 2016-02-11T06:16:36Z

@kentcdodds Overall, this looks great to me. A couple of nitpicks. Also, I think it would be good to add an "integration" test (ie. render a component, simulate a click event, save the event, read from the event at the end of the test, and assert the warning fires). Just to sanity check that things are working.

Otherwise, I think we're good to merge.

kentcdodds · 2016-02-11T06:31:09Z

Happy to write the integration test. I haven't looked into how to do that yet, but I'd appreciate it if you could point me in the right direction to do that :-) Thanks for the feedback!

jimfb · 2016-02-11T07:15:31Z

@kentcdodds A reasonable example is in ReactServerRendering-test.js, we have a test called "should have the correct mounting behavior". Specifically, the most interesting line is: ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance.refs.span));

A test would probably look something like this:

var event = null;
var instance = ReactDOM.render(<div onClick={function(e){event = e;}} />);
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(instance));`
// TODO: assert warnings.length===0
event.nativeEvent;
// TODO: assert warnings.length===1
// TODO: assert warnings[0].contanis("error message text");

facebook-github-bot · 2016-02-16T22:22:14Z

@kentcdodds updated the pull request.

kentcdodds · 2016-02-16T22:23:11Z

Hi @jimfb. Sorry this took a bit. I've updated the tests and added an integration test as you suggested. I think it's solid. One thing that I did change in response to your comments is I combined two tests. When I asserted the console output in the one test, I realized that it was pretty much identical to another. So I just merged the two into one. Let me know if you'd like to see that change.

Thanks for this opportunity to contribute! :D

jimfb · 2016-02-18T05:38:31Z

@kentcdodds This all looks good to me, thanks! But it looks like we broke lint (you can run locally with npm run lint or view the output here: https://travis-ci.org/facebook/react/jobs/109724188). Just fix the lint errors and do a "git commit --amend", and we should be good to go.

…leased syntheticEvents Closes facebook#5939

kentcdodds · 2016-02-18T05:47:06Z

(－‸ლ) thanks! The PR has been updated to fix linting.

Looking forward to my next opportunity to contribute ⭐

facebook-github-bot · 2016-02-18T05:48:41Z

@kentcdodds updated the pull request.

Add warning when reading from event which has been returned to the pool

jimfb · 2016-02-18T05:52:18Z

Thanks @kentcdodds!

kentcdodds · 2016-02-18T06:13:42Z

🎉 🎊

facebook-github-bot added GH Review: review-needed CLA Signed labels Jan 29, 2016

kentcdodds force-pushed the pr/warn-event-pool-access branch from cc49323 to 024c001 Compare January 29, 2016 19:31

zpao reviewed Jan 29, 2016
View reviewed changes

kentcdodds force-pushed the pr/warn-event-pool-access branch from 024c001 to e808985 Compare January 29, 2016 20:04

kentcdodds reviewed Jan 29, 2016
View reviewed changes

kentcdodds force-pushed the pr/warn-event-pool-access branch from e808985 to 2c688f2 Compare January 29, 2016 20:19

kentcdodds force-pushed the pr/warn-event-pool-access branch from 2c688f2 to fa5582e Compare January 29, 2016 20:30

kentcdodds reviewed Jan 29, 2016
View reviewed changes

gaearon reviewed Jan 29, 2016
View reviewed changes

gaearon reviewed Jan 30, 2016
View reviewed changes

kentcdodds force-pushed the pr/warn-event-pool-access branch from 105c774 to 69770b3 Compare January 30, 2016 19:58

kentcdodds force-pushed the pr/warn-event-pool-access branch from 69770b3 to 113facd Compare January 30, 2016 20:06

jimfb reviewed Feb 11, 2016
View reviewed changes

kentcdodds force-pushed the pr/warn-event-pool-access branch from 113facd to cf76b1c Compare February 16, 2016 22:21

jimfb added GH Review: accepted and removed GH Review: review-needed labels Feb 18, 2016

jimfb added this to the 0.15 milestone Feb 18, 2016

jimfb self-assigned this Feb 18, 2016

warn(SyntheticEvent): Warn when accessing or setting properties on re…

6312852

…leased syntheticEvents Closes facebook#5939

kentcdodds force-pushed the pr/warn-event-pool-access branch from cf76b1c to 6312852 Compare February 18, 2016 05:46

jimfb added a commit that referenced this pull request Feb 18, 2016

Merge pull request #5940 from kentcdodds/pr/warn-event-pool-access

e8e56e8

Add warning when reading from event which has been returned to the pool

jimfb merged commit e8e56e8 into facebook:master Feb 18, 2016

kentcdodds deleted the pr/warn-event-pool-access branch February 18, 2016 06:14

renovate bot mentioned this pull request Feb 2, 2018

Update dependency react to v0.14.9 - autoclosed signavio/backbone-rel#29

Closed

1 task

Add warning when reading from event which has been returned to the pool #5940

Add warning when reading from event which has been returned to the pool #5940

Conversation

kentcdodds commented Jan 29, 2016

gaearon commented Jan 29, 2016

gaearon commented Jan 29, 2016

kentcdodds commented Jan 29, 2016

facebook-github-bot commented Jan 29, 2016

Choose a reason for hiding this comment

zpao commented Jan 29, 2016

gaearon commented Jan 29, 2016

zpao commented Jan 29, 2016

kentcdodds commented Jan 29, 2016

Choose a reason for hiding this comment

kentcdodds commented Jan 29, 2016

facebook-github-bot commented Jan 29, 2016

kentcdodds commented Jan 29, 2016

kentcdodds commented Jan 29, 2016

facebook-github-bot commented Jan 29, 2016

kentcdodds commented Jan 29, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

facebook-github-bot commented Jan 29, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jan 30, 2016

facebook-github-bot commented Jan 30, 2016

facebook-github-bot commented Jan 30, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jimfb commented Feb 11, 2016

kentcdodds commented Feb 11, 2016

jimfb commented Feb 11, 2016

facebook-github-bot commented Feb 16, 2016

kentcdodds commented Feb 16, 2016

jimfb commented Feb 18, 2016

kentcdodds commented Feb 18, 2016

facebook-github-bot commented Feb 18, 2016

jimfb commented Feb 18, 2016

kentcdodds commented Feb 18, 2016