Renamed createRef .value attribute to .current (#12375)

* Renamed createRef .value attribute to .current

* Warn if invalid ref object is passed

packages/react-dom/src/__tests__/ReactComponent-test.js

@@ -235,8 +235,8 @@ describe('ReactComponent', () => {
       }
 
       componentDidMount() {
-        expect(this.innerRef.value.getObject()).toEqual(innerObj);
-        expect(this.outerRef.value.getObject()).toEqual(outerObj);
+        expect(this.innerRef.current.getObject()).toEqual(innerObj);
+        expect(this.outerRef.current.getObject()).toEqual(outerObj);
         mounted = true;
       }
     }

packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js

@@ -1019,12 +1019,14 @@ describe('ReactErrorBoundaries', () => {
       'ErrorBoundary render error',
       'ErrorBoundary componentDidUpdate',
     ]);
-    expect(errorMessageRef.value.toString()).toEqual('[object HTMLDivElement]');
+    expect(errorMessageRef.current.toString()).toEqual(
+      '[object HTMLDivElement]',
+    );
 
     log.length = 0;
     ReactDOM.unmountComponentAtNode(container);
     expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
-    expect(errorMessageRef.value).toEqual(null);
+    expect(errorMessageRef.current).toEqual(null);
   });
 
   it('successfully mounts if no error occurs', () => {

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -29,6 +29,7 @@ import {
 import ReactErrorUtils from 'shared/ReactErrorUtils';
 import {Placement, Update, ContentReset} from 'shared/ReactTypeOfSideEffect';
 import invariant from 'fbjs/lib/invariant';
+import warning from 'fbjs/lib/warning';
 
 import {commitCallbacks} from './ReactFiberUpdateQueue';
 import {onCommitUnmount} from './ReactFiberDevToolsHook';
@@ -147,7 +148,7 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
           }
         }
       } else {
-        ref.value = null;
+        ref.current = null;
       }
     }
   }
@@ -315,7 +316,19 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
       if (typeof ref === 'function') {
         ref(instanceToUse);
       } else {
-        ref.value = instanceToUse;
+        if (__DEV__) {
+          if (!ref.hasOwnProperty('current')) {
+            warning(
+              false,
+              'Unexpected ref object provided for %s. ' +
+                'Use either a ref-setter function or Reacte.createRef().%s',
+              getComponentName(finishedWork),
+              getStackAddendumByWorkInProgressFiber(finishedWork),
+            );
+          }
+        }
+
+        ref.current = instanceToUse;
       }
     }
   }
@@ -326,7 +339,7 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
       if (typeof currentRef === 'function') {
         currentRef(null);
       } else {
-        currentRef.value = null;
+        currentRef.current = null;
       }
     }
   }

packages/react/src/ReactCreateRef.js

@@ -11,7 +11,7 @@ import type {RefObject} from 'shared/ReactTypes';
 // an immutable object with a single mutable value
 export function createRef(): RefObject {
   const refObject = {
-    value: null,
+    current: null,
   };
   if (__DEV__) {
     Object.seal(refObject);

packages/react/src/__tests__/ReactCreateRef-test.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactTestRenderer;
+
+describe('ReactCreateRef', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactTestRenderer = require('react-test-renderer');
+  });
+
+  it('should warn in dev if an invalid ref object is provided', () => {
+    function Wrapper({children}) {
+      return children;
+    }
+
+    class ExampleComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
+
+    expect(() =>
+      ReactTestRenderer.create(
+        <Wrapper>
+          <div ref={{}} />
+        </Wrapper>,
+      ),
+    ).toWarnDev(
+      'Unexpected ref object provided for div. ' +
+        'Use either a ref-setter function or Reacte.createRef().\n' +
+        '    in div (at **)\n' +
+        '    in Wrapper (at **)',
+    );
+
+    expect(() =>
+      ReactTestRenderer.create(
+        <Wrapper>
+          <ExampleComponent ref={{}} />
+        </Wrapper>,
+      ),
+    ).toWarnDev(
+      'Unexpected ref object provided for ExampleComponent. ' +
+        'Use either a ref-setter function or Reacte.createRef().\n' +
+        '    in ExampleComponent (at **)\n' +
+        '    in Wrapper (at **)',
+    );
+  });
+});

packages/shared/ReactTypes.js

@@ -101,5 +101,5 @@ export type ReactPortal = {
 };
 
 export type RefObject = {|
-  value: any,
+  current: any,
 |};