Warn early for non-functional event listeners #10453

aweary · 2017-08-13T19:07:11Z

Resolves #10407

To avoid triggering the non-functional event listener component

This should warn from ReactDOMFiberComponent, but we just ignore it here

gaearon · 2017-08-14T18:17:48Z

src/renderers/__tests__/EventPluginHub-test.js

@@ -24,6 +24,8 @@ describe('EventPluginHub', () => {
  });

  it('should prevent non-function listeners, at dispatch', () => {
+    // ReactDOMFiberComponent warns for non-function event listeners
+    spyOn(console, 'error');


We should still add an expectation. So that it doesn't emit some other unwanted warning by mistake in the future.

Done in c377e35

gaearon · 2017-08-14T18:19:10Z

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -227,6 +236,9 @@ function setInitialDOMProperties(
      // Noop
    } else if (registrationNameModules.hasOwnProperty(propKey)) {
      if (nextProp) {
+        if (__DEV__) {
+          warnForInvalidEventListener(propKey, nextProp);


This is a very hot path. How do you feel about hoisting the condition right here (duplicating it) and only calling the function in the bad case?

gaearon · 2017-08-14T18:19:39Z

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

+      ReactDOM.render(<Example />, container);
+      expectDev(console.error.calls.count()).toBe(1);
+      expectDev(console.error.calls.argsFor(0)[0]).toContain(
+        'Expected onClick listener to be a function, instead got type string',


Can we provide component stack here?

aweary · 2017-08-14T18:47:44Z

@gaearon feedback addressed 👍

aweary · 2017-08-14T18:48:17Z

src/renderers/__tests__/EventPluginHub-test.js

+        'Expected onClick listener to be a function, instead got type string',
+      );
+    } else {
+      expectDev(console.error.calls.count()).toBe(0);


This warning isn't included in stack since it fails early

gaearon · 2017-08-14T19:32:22Z

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

@@ -913,7 +917,7 @@ describe('ReactDOMFiber', () => {
      ]);
    });

-    it('should warn for non-functional event listeners', () => {
+    it.only('should warn for non-functional event listeners', () => {
      spyOn(console, 'error');


gaearon · 2017-08-14T19:33:27Z

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

@@ -913,6 +917,24 @@ describe('ReactDOMFiber', () => {
      ]);
    });

+    it.only('should warn for non-functional event listeners', () => {


Need to fix this, otherwise should be good to go

sebmarkbage · 2017-08-14T19:33:58Z

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

@@ -913,6 +917,24 @@ describe('ReactDOMFiber', () => {
      ]);
    });

+    it.only('should warn for non-functional event listeners', () => {


sebmarkbage · 2017-08-14T19:36:17Z

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -227,6 +238,9 @@ function setInitialDOMProperties(
      // Noop
    } else if (registrationNameModules.hasOwnProperty(propKey)) {
      if (nextProp) {
+        if (__DEV__ && typeof nextProp !== 'function') {


You can move this typeof nextProp !== 'function' assertion into the warnForInvalidEventListener function. E.g. as the first argument to warning(). Makes it easier to keep in sync and update. E.g. if we want to support other type of listeners like {handleEvent() { }}.

That's how it used to do but I wanted to avoid extra overhead for calls for every single prop. These things are small but sometimes add up (like when we fixed DEV performance in 15.3).

But I don't feel strongly. Didn't think about the object case where it could change.

sebmarkbage · 2017-08-14T19:40:32Z

This only covers ReactDOM. We have the same issue in ReactNative but there we don't need to do any early work to set up listeners so we don't have the equivalent paths.

gaearon · 2017-08-15T10:20:34Z

src/renderers/dom/fiber/ReactDOMFiberComponent.js

+  var warnForInvalidEventListener = function(registrationName, listener) {
+    warning(
+      false,
+      'Expected %s listener to be a function, instead got type %s%s',


Nit: I think we usually end warnings with periods (before the stack) so that they look like sentences.

Brandon Dail added 3 commits August 13, 2017 14:04

Add early warning for non-functional event listeners

408d2e6

Use functional listeners in ReactDOMComponent test

ad3138b

To avoid triggering the non-functional event listener component

spy on console.error in non-function EventPluginHub test

eb8d72c

This should warn from ReactDOMFiberComponent, but we just ignore it here

facebook-github-bot added the CLA Signed label Aug 13, 2017

aweary mentioned this pull request Aug 13, 2017

Warn early if event listener is not a function #10407

Closed

aweary changed the title ~~Warn early non function event listeners~~ Warn early for non-functional event listeners Aug 13, 2017

Remove redundant check for listener

40f3c08

gaearon mentioned this pull request Aug 14, 2017

React 16 Umbrella ☂️ (and 15.5) #8854

Closed

bvaughn requested a review from sophiebits August 14, 2017 17:23

gaearon reviewed Aug 14, 2017

View reviewed changes

Brandon Dail added 3 commits August 14, 2017 13:43

Add expectation for non-functional listener warning in EventPluginHub

c377e35

Hoist listener typeof check in hot paths

9e5b795

Include stack addendum in non-functional listener warning

a9fcfb3

aweary commented Aug 14, 2017

View reviewed changes

Make it pretty

987857f

gaearon reviewed Aug 14, 2017

View reviewed changes

gaearon approved these changes Aug 14, 2017

View reviewed changes

sebmarkbage reviewed Aug 14, 2017

View reviewed changes

sebmarkbage approved these changes Aug 14, 2017

View reviewed changes

Remove it.onnly from ReactDOMFiber test

3f82a3d

gaearon reviewed Aug 15, 2017

View reviewed changes

gaearon and others added 4 commits August 23, 2017 13:16

Fix message

0e296e9

Update expected message

7f4736d

Change invariant message to match the new style

e016232

Fix remaining warning

38f310c

gaearon merged commit 34780da into facebook:master Aug 23, 2017

bvaughn mentioned this pull request Sep 7, 2017

React 16 RC #10294

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Warn early for non-functional event listeners #10453

Warn early for non-functional event listeners #10453

aweary commented Aug 13, 2017

gaearon Aug 14, 2017

aweary Aug 14, 2017

gaearon Aug 14, 2017

gaearon Aug 14, 2017

aweary commented Aug 14, 2017

aweary Aug 14, 2017

gaearon Aug 14, 2017

gaearon Aug 14, 2017

sebmarkbage Aug 14, 2017

sebmarkbage Aug 14, 2017 •

edited

Loading

gaearon Aug 14, 2017

gaearon Aug 14, 2017

sebmarkbage commented Aug 14, 2017

gaearon Aug 15, 2017

Warn early for non-functional event listeners #10453

Warn early for non-functional event listeners #10453

Conversation

aweary commented Aug 13, 2017

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

aweary commented Aug 14, 2017

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

sebmarkbage Aug 14, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sebmarkbage commented Aug 14, 2017

Choose a reason for hiding this comment

sebmarkbage Aug 14, 2017 •

edited

Loading