Renamed createRef .value attribute to .current (#12375)
* Renamed createRef .value attribute to .current * Warn if invalid ref object is passed
Brian Vaughn committed
Mar 14, 2018 at 09:43 UTC
77196100b833cca83a928caa2bd02482665546c2
6 files changed
+84
-9
packages/react-dom/src/__tests__/ReactComponent-test.js
+2
-2
@@ -235,8 +235,8 @@ describe('ReactComponent', () => {
235
}
236
237
componentDidMount() {
238
- expect(this.innerRef.value.getObject()).toEqual(innerObj);
239
- expect(this.outerRef.value.getObject()).toEqual(outerObj);
238
+ expect(this.innerRef.current.getObject()).toEqual(innerObj);
239
+ expect(this.outerRef.current.getObject()).toEqual(outerObj);
240
mounted = true;
241
}
242
}
packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+4
-2
@@ -1019,12 +1019,14 @@ describe('ReactErrorBoundaries', () => {
1019
'ErrorBoundary render error',
1020
'ErrorBoundary componentDidUpdate',
1021
]);
1022
- expect(errorMessageRef.value.toString()).toEqual('[object HTMLDivElement]');
1022
+ expect(errorMessageRef.current.toString()).toEqual(
1023
+ '[object HTMLDivElement]',
1024
+ );
1025
1026
log.length = 0;
1027
ReactDOM.unmountComponentAtNode(container);
1028
expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
1027
- expect(errorMessageRef.value).toEqual(null);
1029
+ expect(errorMessageRef.current).toEqual(null);
1030
});
1031
1032
it('successfully mounts if no error occurs', () => {
packages/react-reconciler/src/ReactFiberCommitWork.js
+16
-3
@@ -29,6 +29,7 @@ import {
29
import ReactErrorUtils from 'shared/ReactErrorUtils';
30
import {Placement, Update, ContentReset} from 'shared/ReactTypeOfSideEffect';
31
import invariant from 'fbjs/lib/invariant';
32
+import warning from 'fbjs/lib/warning';
33
34
import {commitCallbacks} from './ReactFiberUpdateQueue';
35
import {onCommitUnmount} from './ReactFiberDevToolsHook';
@@ -147,7 +148,7 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
148
}
149
}
150
} else {
150
- ref.value = null;
151
+ ref.current = null;
152
}
153
}
154
}
@@ -315,7 +316,19 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
316
if (typeof ref === 'function') {
317
ref(instanceToUse);
318
} else {
318
- ref.value = instanceToUse;
319
+ if (__DEV__) {
320
+ if (!ref.hasOwnProperty('current')) {
321
+ warning(
322
+ false,
323
+ 'Unexpected ref object provided for %s. ' +
324
+ 'Use either a ref-setter function or Reacte.createRef().%s',
325
+ getComponentName(finishedWork),
326
+ getStackAddendumByWorkInProgressFiber(finishedWork),
327
+ );
328
+ }
329
+ }
330
+
331
+ ref.current = instanceToUse;
332
}
333
}
334
}
@@ -326,7 +339,7 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
339
if (typeof currentRef === 'function') {
340
currentRef(null);
341
} else {
329
- currentRef.value = null;
342
+ currentRef.current = null;
343
}
344
}
345
}
packages/react/src/ReactCreateRef.js
+1
-1
@@ -11,7 +11,7 @@ import type {RefObject} from 'shared/ReactTypes';
11
// an immutable object with a single mutable value
12
export function createRef(): RefObject {
13
const refObject = {
14
- value: null,
14
+ current: null,
15
};
16
if (__DEV__) {
17
Object.seal(refObject);
packages/react/src/__tests__/ReactCreateRef-test.js
new
+60
@@ -0,0 +1,60 @@
1
+/**
2
+ * Copyright (c) 2013-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+let React;
13
+let ReactTestRenderer;
14
+
15
+describe('ReactCreateRef', () => {
16
+ beforeEach(() => {
17
+ jest.resetModules();
18
+
19
+ React = require('react');
20
+ ReactTestRenderer = require('react-test-renderer');
21
+ });
22
+
23
+ it('should warn in dev if an invalid ref object is provided', () => {
24
+ function Wrapper({children}) {
25
+ return children;
26
+ }
27
+
28
+ class ExampleComponent extends React.Component {
29
+ render() {
30
+ return null;
31
+ }
32
+ }
33
+
34
+ expect(() =>
35
+ ReactTestRenderer.create(
36
+ <Wrapper>
37
+ <div ref={{}} />
38
+ </Wrapper>,
39
+ ),
40
+ ).toWarnDev(
41
+ 'Unexpected ref object provided for div. ' +
42
+ 'Use either a ref-setter function or Reacte.createRef().\n' +
43
+ ' in div (at **)\n' +
44
+ ' in Wrapper (at **)',
45
+ );
46
+
47
+ expect(() =>
48
+ ReactTestRenderer.create(
49
+ <Wrapper>
50
+ <ExampleComponent ref={{}} />
51
+ </Wrapper>,
52
+ ),
53
+ ).toWarnDev(
54
+ 'Unexpected ref object provided for ExampleComponent. ' +
55
+ 'Use either a ref-setter function or Reacte.createRef().\n' +
56
+ ' in ExampleComponent (at **)\n' +
57
+ ' in Wrapper (at **)',
58
+ );
59
+ });
60
+});
packages/shared/ReactTypes.js
+1
-1
@@ -101,5 +101,5 @@ export type ReactPortal = {
101
};
102
103
export type RefObject = {|
104
- value: any,
104
+ current: any,
105
|};