Don't define key or ref dummy props if none were provided (#7488)
* Don't define key or ref dummy props if none were provided This fixes a performance regression. * Style nit
Dan Abramov committed
Aug 13, 2016 at 19:36 UTC
a56e105081e27877a2ecbfdc8d591e3b151b2af1
1 file changed
+54
-50
src/isomorphic/classic/element/ReactElement.js
+54
-50
@@ -52,6 +52,48 @@ function hasValidKey(config) {
52
return config.key !== undefined;
53
}
54
55
+function defineKeyPropWarningGetter(props, displayName) {
56
+ var warnAboutAccessingKey = function() {
57
+ if (!specialPropKeyWarningShown) {
58
+ specialPropKeyWarningShown = true;
59
+ warning(
60
+ false,
61
+ '%s: `key` is not a prop. Trying to access it will result ' +
62
+ 'in `undefined` being returned. If you need to access the same ' +
63
+ 'value within the child component, you should pass it as a different ' +
64
+ 'prop. (https://fb.me/react-special-props)',
65
+ displayName
66
+ );
67
+ }
68
+ };
69
+ warnAboutAccessingKey.isReactWarning = true;
70
+ Object.defineProperty(props, 'key', {
71
+ get: warnAboutAccessingKey,
72
+ configurable: true,
73
+ });
74
+}
75
+
76
+function defineRefPropWarningGetter(props, displayName) {
77
+ var warnAboutAccessingRef = function() {
78
+ if (!specialPropRefWarningShown) {
79
+ specialPropRefWarningShown = true;
80
+ warning(
81
+ false,
82
+ '%s: `ref` is not a prop. Trying to access it will result ' +
83
+ 'in `undefined` being returned. If you need to access the same ' +
84
+ 'value within the child component, you should pass it as a different ' +
85
+ 'prop. (https://fb.me/react-special-props)',
86
+ displayName
87
+ );
88
+ }
89
+ };
90
+ warnAboutAccessingRef.isReactWarning = true;
91
+ Object.defineProperty(props, 'ref', {
92
+ get: warnAboutAccessingRef,
93
+ configurable: true,
94
+ });
95
+}
96
+
97
/**
98
* Factory method to create a new React element. This no longer adheres to
99
* the class pattern, so do not use new to call it. Also, no instanceof check
@@ -209,56 +251,18 @@ ReactElement.createElement = function(type, config, children) {
251
}
252
}
253
if (__DEV__) {
212
- var displayName = typeof type === 'function' ?
213
- (type.displayName || type.name || 'Unknown') :
214
- type;
215
-
216
- // Create dummy `key` and `ref` property to `props` to warn users against its use
217
- var warnAboutAccessingKey = function() {
218
- if (!specialPropKeyWarningShown) {
219
- specialPropKeyWarningShown = true;
220
- warning(
221
- false,
222
- '%s: `key` is not a prop. Trying to access it will result ' +
223
- 'in `undefined` being returned. If you need to access the same ' +
224
- 'value within the child component, you should pass it as a different ' +
225
- 'prop. (https://fb.me/react-special-props)',
226
- displayName
227
- );
228
- }
229
- return undefined;
230
- };
231
- warnAboutAccessingKey.isReactWarning = true;
232
-
233
- var warnAboutAccessingRef = function() {
234
- if (!specialPropRefWarningShown) {
235
- specialPropRefWarningShown = true;
236
- warning(
237
- false,
238
- '%s: `ref` is not a prop. Trying to access it will result ' +
239
- 'in `undefined` being returned. If you need to access the same ' +
240
- 'value within the child component, you should pass it as a different ' +
241
- 'prop. (https://fb.me/react-special-props)',
242
- displayName
243
- );
244
- }
245
- return undefined;
246
- };
247
- warnAboutAccessingRef.isReactWarning = true;
248
-
249
- if (typeof props.$$typeof === 'undefined' ||
250
- props.$$typeof !== REACT_ELEMENT_TYPE) {
251
- if (!props.hasOwnProperty('key')) {
252
- Object.defineProperty(props, 'key', {
253
- get: warnAboutAccessingKey,
254
- configurable: true,
255
- });
256
- }
257
- if (!props.hasOwnProperty('ref')) {
258
- Object.defineProperty(props, 'ref', {
259
- get: warnAboutAccessingRef,
260
- configurable: true,
261
- });
254
+ if (key || ref) {
255
+ if (typeof props.$$typeof === 'undefined' ||
256
+ props.$$typeof !== REACT_ELEMENT_TYPE) {
257
+ var displayName = typeof type === 'function' ?
258
+ (type.displayName || type.name || 'Unknown') :
259
+ type;
260
+ if (key) {
261
+ defineKeyPropWarningGetter(props, displayName);
262
+ }
263
+ if (ref) {
264
+ defineRefPropWarningGetter(props, displayName);
265
+ }
266
}
267
}
268
}