From 8cb9df3525f1dcceaf0af1c172783a008b12bece Mon Sep 17 00:00:00 2001
From: Flarnie Marchan <flarnie@fb.com>
Date: Wed, 12 Jul 2017 11:43:01 -0700
Subject: [PATCH] Add improved warning and docs for 'refs must have owner' in
 Fiber

**what is the change?:**
 - Added warning in the place where this error is thrown in Fiber, to
   get parity with older versions of React.
 - Updated docs to mention new error message as well as old one.

I started to write a new docs page for the new error, and realized the
content was the same as the old one. So then I just updated the existing
error page.

**why make this change?:**
We want to avoid confusion when this error is thrown from React v16.

**test plan:**
- manually inspected docs page
- manually tested in a CRA to trigger the error message

(Flarnie will insert screenshots)

**issue:**
Fixes #9962
Related to #8854
---
 docs/warnings/refs-must-have-owner.md              |  8 +++++++-
 src/renderers/shared/fiber/ReactChildFiber.js      | 12 ++++++++++++
 src/renderers/shared/fiber/ReactFiberCommitWork.js |  6 ------
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/docs/warnings/refs-must-have-owner.md b/docs/warnings/refs-must-have-owner.md
index 59a953df5d5d9..2fca7ff9933fc 100644
--- a/docs/warnings/refs-must-have-owner.md
+++ b/docs/warnings/refs-must-have-owner.md
@@ -4,8 +4,14 @@ layout: single
 permalink: warnings/refs-must-have-owner.html
 ---
 
-You are probably here because you got the following error messages:
+You are probably here because you got one of the following error messages:
 
+*React 16.0.0+*
+> Warning:
+>
+> Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
+
+*earlier versions of React*
 > Warning:
 >
 > 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.
diff --git a/src/renderers/shared/fiber/ReactChildFiber.js b/src/renderers/shared/fiber/ReactChildFiber.js
index f5f46616197a2..abff0abf362ba 100644
--- a/src/renderers/shared/fiber/ReactChildFiber.js
+++ b/src/renderers/shared/fiber/ReactChildFiber.js
@@ -162,6 +162,18 @@ function coerceRef(current: Fiber | null, element: ReactElement) {
       };
       ref._stringRef = stringRef;
       return ref;
+    } else {
+      invariant(
+        typeof mixedRef === 'string',
+        'Expected ref to be a function or a string.',
+      );
+      invariant(
+        element._owner,
+        'Element ref was specified as a string (%s) but no owner was ' +
+          'set. You may have multiple copies of React loaded. ' +
+          '(details: https://fb.me/react-refs-must-have-owner).',
+        mixedRef,
+      );
     }
   }
   return mixedRef;
diff --git a/src/renderers/shared/fiber/ReactFiberCommitWork.js b/src/renderers/shared/fiber/ReactFiberCommitWork.js
index a8b25935471bb..23a0230e06541 100644
--- a/src/renderers/shared/fiber/ReactFiberCommitWork.js
+++ b/src/renderers/shared/fiber/ReactFiberCommitWork.js
@@ -557,12 +557,6 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   function commitAttachRef(finishedWork: Fiber) {
     const ref = finishedWork.ref;
     if (ref !== null) {
-      invariant(
-        typeof ref === 'function',
-        'commitAttachRef(...): Expected ref to be a function. ' +
-          'You may have multiple copies of React loaded. ' +
-          '(details: https://fb.me/react-expected-ref-to-be-function).',
-      );
       const instance = finishedWork.stateNode;
       switch (finishedWork.tag) {
         case HostComponent: