Creating element with ref in constructor does not throw error in dev mode (#9635) #10025

iansu · 2017-06-22T21:12:19Z

Currently just a failing test to show that this issue does exist. Next step is to fix the issue. See issue #9635.

iansu · 2017-06-22T22:23:36Z

I've managed to fix this bug but, to be perfectly honest, I don't fully understand what's going on here. Previously when constructing a component in dev mode ReactCurrentOwner.current was set to this. I just updated that check so that ReactCurrentOwner.current is only set when __DEV__ = true and the component doesn't have a constructor. If the component does have a constructor then it follows the same code path as it would when __DEV__ = false. That makes my failing test pass and doesn't break any other tests. 🤷‍♂️

gaearon · 2017-06-23T15:10:15Z

Can you also check if this ever worked with previous versions of React? Specifically 0.13 and 0.14?

iansu · 2017-06-23T17:19:04Z

@gaearon I had a bit of trouble getting 0.13 installed but I think I got it working enough to run the tests. It looks like the error is thrown in 0.13 when __DEV__ = true and is not thrown in 0.14.

gaearon · 2017-06-29T15:15:35Z

src/renderers/__tests__/refs-test.js

+      ReactTestUtils.renderIntoDocument(<RefTest />);
+    }).toThrowError();
+
+    __DEV__ = originalDev;


I think this should be in a finally block so that it happens regardless.

gaearon · 2017-06-29T15:15:54Z

src/renderers/__tests__/refs-test.js

+
+    expect(function() {
+      ReactTestUtils.renderIntoDocument(<RefTest />);
+    }).toThrowError();


It would be nice to assert a specific error message here. I don't think Fiber currently has a nice message in this case. Can you look into it?

I originally tried checking for the specific error message. I copy/pasted the message but it said actual vs. expected message didn't match, even though they appeared identical. I'll give it another try.

iansu · 2017-06-29T22:43:06Z

I've updated the tests to check for the specific error message. This breaks the tests in Fiber since the error message is different. @gaearon you're correct that this error does not have a nice message in Fiber, it just results in a TypeError. Here's the output:

  ● creating element with ref in constructor › throws an error when __DEV__ = false

    expect(function).toThrowError(string)
    
    Expected the function to throw an error matching:
      "addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner)."
    Instead, it threw:
      TypeError: ref is not a function      
          at commitAttachRef (src/renderers/shared/fiber/ReactFiberCommitWork.js:563:11)
          at commitAllLifeCycles (src/renderers/shared/fiber/ReactFiberScheduler.js:387:9)
          at commitAllWork (src/renderers/shared/fiber/ReactFiberScheduler.js:511:11)
          at completeUnitOfWork (src/renderers/shared/fiber/ReactFiberScheduler.js:666:11)
          at performUnitOfWork (src/renderers/shared/fiber/ReactFiberScheduler.js:698:14)
          at workLoopSync (src/renderers/shared/fiber/ReactFiberScheduler.js:805:24)
          at workLoop (src/renderers/shared/fiber/ReactFiberScheduler.js:837:9)
          at performWork (src/renderers/shared/fiber/ReactFiberScheduler.js:894:11)
          at scheduleUpdate (src/renderers/shared/fiber/ReactFiberScheduler.js:1323:19)
          at scheduleTopLevelUpdate (src/renderers/shared/fiber/ReactFiberReconciler.js:231:5)
          at Object.updateContainer (src/renderers/shared/fiber/ReactFiberReconciler.js:267:7)
          at src/renderers/dom/fiber/ReactDOMFiberEntry.js:507:19
          at Object.unbatchedUpdates (src/renderers/shared/fiber/ReactFiberScheduler.js:1418:14)
          at renderSubtreeIntoContainer (src/renderers/dom/fiber/ReactDOMFiberEntry.js:506:17)
          at Object.render (src/renderers/dom/fiber/ReactDOMFiberEntry.js:553:12)
          at Object.renderIntoDocument (src/renderers/dom/test/ReactTestUtilsEntry.js:153:21)
          at src/renderers/__tests__/refs-test.js:520:24
          at Object.<anonymous> (src/renderers/__tests__/refs-test.js:521:10)
      
      at Object.<anonymous> (src/renderers/__tests__/refs-test.js:521:10)

iansu · 2017-06-29T22:52:08Z

I have a potential fix for this in Fiber. Currently on line 559 of ReactFiberCommitWork.js we check if ref is not null. I've modified that line to check if ref is a function, since that's how it's used inside that block. If it's not a function I'm just displaying the same error message as the non-Fiber version. Let me know if you'd like me to commit this fix.

iansu · 2017-07-13T22:18:27Z

@gaearon I've made the requested changes here and pushed a commit but I'm not sure if there's some way I can request another review or otherwise confirm that I've made the changes. I assume you've just got your hands full but I want to make sure you're not waiting on me. Also let me know about the Fiber fix in my previous comment.

gaearon · 2017-08-12T10:44:11Z

Sorry this slipped through the cracks. We were focused on getting 16 beta out.

Can you rebase on master? I think the change to Fiber code is now not necessary because we have a better check there.

iansu · 2017-08-12T19:04:14Z

I rebased upstream/master into my branch and now it's showing all the commits that have happened since then as part of my pull request. I'm not exactly sure how to fix that. 😬

Looking at master I don't see any new checks in commitAttachRef. So unless something is happening elsewhere to guarantee that finishedWork.ref is either null or a function and not some other type then I think this error can still happen.

iansu · 2017-08-12T19:18:51Z

I tried running the tests I added for this issue with the version of commitAttachRef from master and they fail so this bug does still exist.

Also, no need to apologize, I understand that React 16 is high priority. I want it to be released too. 😀

UPDATE: It looks like the error is being caught but with a different error message which is why the tests are failing.

iansu · 2017-08-12T20:33:53Z

I've reverted the changes in commitAttachRef and updated my tests.

gaearon · 2017-08-14T23:07:56Z

The extra commits look weird. Let's just do

git fetch origin # assuming it points to main repo
git merge origin/master
git reset --soft origin/master
git add .
git commit

And then force push. This will turn it into a single commit on top of current master.

iansu · 2017-08-14T23:12:41Z

origin points to my fork but I've got upstream set to point to the main repo. I will fix this shortly and push up my changes.

… Only set ReactCurrentOwner.current in dev mode when the component has no constructor.

iansu · 2017-08-14T23:23:17Z

Done! GitHub was still showing all the commits on the pull request for a minute there and I thought I effed it up again but it looks good now. Thanks for the help Dan!

gaearon · 2017-08-15T09:22:02Z

Sweet. Thanks.

… Only set ReactCurrentOwner.current in dev mode when the component has no constructor. (#10025) nhunzaker: I've added an additional line to the ref test that sets the NODE_ENV invironment variable. This allows the test to pass.

facebook-github-bot added the CLA Signed label Jun 22, 2017

aweary mentioned this pull request Jun 26, 2017

React 15.6.2 Umbrella #10040

Closed

12 tasks

gaearon requested changes Jun 29, 2017

View reviewed changes

nhunzaker mentioned this pull request Aug 10, 2017

15.6.2 Release Prep #10430

Merged

11 tasks

Added unit tests for creating an element with a ref in a constructor.…

7c175dc

… Only set ReactCurrentOwner.current in dev mode when the component has no constructor.

iansu force-pushed the ref_dev_bug branch from 321f850 to 7c175dc Compare August 14, 2017 23:20

gaearon approved these changes Aug 15, 2017

View reviewed changes

gaearon merged commit 7f6b940 into facebook:master Aug 15, 2017

nhunzaker added a commit that referenced this pull request Aug 15, 2017

Update changelog with #10025

d35588e

nhunzaker added a commit that referenced this pull request Aug 15, 2017

Improve grammar on changelog #10025 entry

c088023

nhunzaker added a commit that referenced this pull request Aug 15, 2017

Update changelog with #10025

39086b9

nhunzaker added a commit that referenced this pull request Aug 15, 2017

Improve grammar on changelog #10025 entry

b953756

sophiebits pushed a commit that referenced this pull request Sep 26, 2017

Update changelog with #10025

fe69ea4

This was referenced Aug 26, 2019

[Snyk] Upgrade react from 15.4.2 to 15.6.2 T0mmykn1fe/blueocean-plugin#3

Open

[Snyk] Upgrade react-dom from 15.4.2 to 15.6.2 T0mmykn1fe/blueocean-plugin#4

Open

This was referenced Sep 4, 2019

[Snyk] Upgrade react from 15.6.1 to 15.6.2 jakeherp/rsvp-app#2

Merged

[Snyk] Upgrade react-dom from 15.6.1 to 15.6.2 jakeherp/rsvp-app#3

Merged

snyk-bot mentioned this pull request Feb 9, 2020

[Snyk] Upgrade react from 15.4.1 to 15.6.2 NetanelHadas/react-native-albums#1

Open

snyk-bot mentioned this pull request Mar 3, 2020

[Snyk] Upgrade: react, react-dom judynjagi/Bucketlist-React-Redux-WebApplication#1

Open

This was referenced Mar 18, 2020

[Snyk] Upgrade: react, react-dom O330oei/sharetribe#3

Merged

[Snyk] Upgrade: react, react-dom godaddy/svgs#51

Closed

[Snyk] Upgrade react from 15.3.1 to 15.6.2 ImranSaadi/react-native-admob#10

Merged

This was referenced Mar 27, 2020

[Snyk] Upgrade: react, react-dom karlhorky/talks#12

Closed

[Snyk] Upgrade: react, react-dom dmitriz/react-pure-component-starter#1

Open

This was referenced Apr 7, 2020

[Snyk] Upgrade react from 15.2.1 to 15.6.2 rangle/react-native-workshop-1#1

Open

[Snyk] Upgrade react from 15.0.2 to 15.6.2 rangle/react-native-workshop#64

Open

[Snyk] Upgrade react from 15.3.1 to 15.6.2 rangle/NavigationExperimentalWorkshop#2

Open

This was referenced May 6, 2020

[Snyk] Upgrade: react, react-dom yamafaktory/babel-react-rollup-starter#117

Open

[Snyk] Upgrade: react, react-dom yamafaktory/buble-react-rollup-starter#95

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Creating element with ref in constructor does not throw error in dev mode (#9635) #10025

Creating element with ref in constructor does not throw error in dev mode (#9635) #10025

iansu commented Jun 22, 2017 •

edited

Loading

iansu commented Jun 22, 2017

gaearon commented Jun 23, 2017

iansu commented Jun 23, 2017 •

edited

Loading

gaearon Jun 29, 2017

gaearon Jun 29, 2017

iansu Jun 29, 2017

iansu commented Jun 29, 2017

iansu commented Jun 29, 2017

iansu commented Jul 13, 2017 •

edited

Loading

gaearon commented Aug 12, 2017

iansu commented Aug 12, 2017

iansu commented Aug 12, 2017 •

edited

Loading

iansu commented Aug 12, 2017

gaearon commented Aug 14, 2017

iansu commented Aug 14, 2017

iansu commented Aug 14, 2017

gaearon commented Aug 15, 2017

Creating element with ref in constructor does not throw error in dev mode (#9635) #10025

Creating element with ref in constructor does not throw error in dev mode (#9635) #10025

Conversation

iansu commented Jun 22, 2017 • edited Loading

iansu commented Jun 22, 2017

gaearon commented Jun 23, 2017

iansu commented Jun 23, 2017 • edited Loading

gaearon Jun 29, 2017

Choose a reason for hiding this comment

gaearon Jun 29, 2017

Choose a reason for hiding this comment

iansu Jun 29, 2017

Choose a reason for hiding this comment

iansu commented Jun 29, 2017

iansu commented Jun 29, 2017

iansu commented Jul 13, 2017 • edited Loading

gaearon commented Aug 12, 2017

iansu commented Aug 12, 2017

iansu commented Aug 12, 2017 • edited Loading

iansu commented Aug 12, 2017

gaearon commented Aug 14, 2017

iansu commented Aug 14, 2017

iansu commented Aug 14, 2017

gaearon commented Aug 15, 2017

iansu commented Jun 22, 2017 •

edited

Loading

iansu commented Jun 23, 2017 •

edited

Loading

iansu commented Jul 13, 2017 •

edited

Loading

iansu commented Aug 12, 2017 •

edited

Loading