Remove JSX propTypes validation (#28328)
This removes the remaining `propTypes` validation calls, making declaring `propTypes` a no-op. In other words, React itself will no longer validate the `propTypes` that you declare on your components. In general, our recommendation is to use static type checking (e.g. TypeScript). If you'd like to still run propTypes checks, you can do so manually, same as you'd do outside React: ```js import checkPropTypes from 'prop-types/checkPropTypes'; function Button(props) { checkPropTypes(Button.propTypes, prop, 'prop', Button.name) // ... } ``` This could be automated as a Babel plugin if you want to keep these checks implicit. (We will not be providing such a plugin, but someone in community might be interested in building or maintaining one.)
dan committed
Feb 21, 2024 at 11:15 UTC
353ecd05160a318a3f75260ee7906fd12e05cb9d
10 files changed
+12
-588
packages/react-art/npm/Circle.js
-5
@@ -18,7 +18,6 @@
18
'use strict';
19
20
var assign = Object.assign;
21
-var PropTypes = require('prop-types');
21
var React = require('react');
22
var ReactART = require('react-art');
23
@@ -34,10 +33,6 @@ var Shape = ReactART.Shape;
33
var Circle = createReactClass({
34
displayName: 'Circle',
35
37
- propTypes: {
38
- radius: PropTypes.number.isRequired,
39
- },
40
-
36
render: function render() {
37
var radius = this.props.radius;
38
packages/react-art/npm/Rectangle.js
-11
@@ -25,7 +25,6 @@
25
'use strict';
26
27
var assign = Object.assign;
28
-var PropTypes = require('prop-types');
28
var React = require('react');
29
var ReactART = require('react-art');
30
@@ -41,16 +40,6 @@ var Path = ReactART.Path;
40
var Rectangle = createReactClass({
41
displayName: 'Rectangle',
42
44
- propTypes: {
45
- width: PropTypes.number.isRequired,
46
- height: PropTypes.number.isRequired,
47
- radius: PropTypes.number,
48
- radiusTopLeft: PropTypes.number,
49
- radiusTopRight: PropTypes.number,
50
- radiusBottomRight: PropTypes.number,
51
- radiusBottomLeft: PropTypes.number,
52
- },
53
-
43
render: function render() {
44
var width = this.props.width;
45
var height = this.props.height;
packages/react-art/npm/Wedge.js
-8
@@ -21,7 +21,6 @@
21
'use strict';
22
23
var assign = Object.assign;
24
-var PropTypes = require('prop-types');
24
var React = require('react');
25
var ReactART = require('react-art');
26
@@ -37,13 +36,6 @@ var Path = ReactART.Path;
36
var Wedge = createReactClass({
37
displayName: 'Wedge',
38
40
- propTypes: {
41
- outerRadius: PropTypes.number.isRequired,
42
- startAngle: PropTypes.number.isRequired,
43
- endAngle: PropTypes.number.isRequired,
44
- innerRadius: PropTypes.number,
45
- },
46
-
39
circleRadians: Math.PI * 2,
40
41
radiansPerDegree: Math.PI / 180,
packages/react-art/src/__tests__/ReactART-test.js
-39
@@ -456,18 +456,6 @@ describe('ReactARTComponents', () => {
456
expect(circle.toJSON()).toMatchSnapshot();
457
});
458
459
- it('should warn if radius is missing on a Circle component', () => {
460
- expect(() =>
461
- ReactTestRenderer.create(
462
- <Circle stroke="green" strokeWidth={3} fill="blue" />,
463
- ),
464
- ).toErrorDev(
465
- 'Warning: Failed prop type: The prop `radius` is marked as required in `Circle`, ' +
466
- 'but its value is `undefined`.' +
467
- '\n in Circle (at **)',
468
- );
469
- });
470
-
459
it('should generate a <Shape> with props for drawing the Rectangle', () => {
460
const rectangle = ReactTestRenderer.create(
461
<Rectangle width={50} height={50} stroke="green" fill="blue" />,
@@ -529,19 +517,6 @@ describe('ReactARTComponents', () => {
517
expect(rectangle.toJSON()).toMatchSnapshot();
518
});
519
532
- it('should warn if width/height is missing on a Rectangle component', () => {
533
- expect(() =>
534
- ReactTestRenderer.create(<Rectangle stroke="green" fill="blue" />),
535
- ).toErrorDev([
536
- 'Warning: Failed prop type: The prop `width` is marked as required in `Rectangle`, ' +
537
- 'but its value is `undefined`.' +
538
- '\n in Rectangle (at **)',
539
- 'Warning: Failed prop type: The prop `height` is marked as required in `Rectangle`, ' +
540
- 'but its value is `undefined`.' +
541
- '\n in Rectangle (at **)',
542
- ]);
543
- });
544
-
520
it('should generate a <Shape> with props for drawing the Wedge', () => {
521
const wedge = ReactTestRenderer.create(
522
<Wedge outerRadius={50} startAngle={0} endAngle={360} fill="blue" />,
@@ -555,18 +530,4 @@ describe('ReactARTComponents', () => {
530
);
531
expect(wedge.toJSON()).toBeNull();
532
});
558
-
559
- it('should warn if outerRadius/startAngle/endAngle is missing on a Wedge component', () => {
560
- expect(() => ReactTestRenderer.create(<Wedge fill="blue" />)).toErrorDev([
561
- 'Warning: Failed prop type: The prop `outerRadius` is marked as required in `Wedge`, ' +
562
- 'but its value is `undefined`.' +
563
- '\n in Wedge (at **)',
564
- 'Warning: Failed prop type: The prop `startAngle` is marked as required in `Wedge`, ' +
565
- 'but its value is `undefined`.' +
566
- '\n in Wedge (at **)',
567
- 'Warning: Failed prop type: The prop `endAngle` is marked as required in `Wedge`, ' +
568
- 'but its value is `undefined`.' +
569
- '\n in Wedge (at **)',
570
- ]);
571
- });
533
});
packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
+1
-7
@@ -433,14 +433,11 @@ describe('ReactFunctionComponent', () => {
433
);
434
});
435
436
- // TODO: change this test after we deprecate default props support
437
- // for function components
438
- it('should support default props and prop types', async () => {
436
+ it('should support default props', async () => {
437
function Child(props) {
438
return <div>{props.test}</div>;
439
}
440
Child.defaultProps = {test: 2};
443
- Child.propTypes = {test: PropTypes.string};
441
442
await expect(async () => {
443
const container = document.createElement('div');
@@ -451,9 +448,6 @@ describe('ReactFunctionComponent', () => {
448
});
449
}).toErrorDev([
450
'Warning: Child: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
454
- 'Warning: Failed prop type: Invalid prop `test` of type `number` ' +
455
- 'supplied to `Child`, expected `string`.\n' +
456
- ' in Child (at **)',
451
]);
452
});
453
packages/react/src/__tests__/ReactElementClone-test.js
-37
@@ -10,7 +10,6 @@
10
'use strict';
11
12
let act;
13
-let PropTypes;
13
let React;
14
let ReactDOMClient;
15
@@ -22,7 +21,6 @@ describe('ReactElementClone', () => {
21
22
act = require('internal-test-utils').act;
23
25
- PropTypes = require('prop-types');
24
React = require('react');
25
ReactDOMClient = require('react-dom/client');
26
@@ -335,41 +333,6 @@ describe('ReactElementClone', () => {
333
React.cloneElement(<div />, null, [{}, {}]);
334
});
335
338
- it('should check declared prop types after clone', async () => {
339
- class Component extends React.Component {
340
- static propTypes = {
341
- color: PropTypes.string.isRequired,
342
- };
343
- render() {
344
- return React.createElement('div', null, 'My color is ' + this.color);
345
- }
346
- }
347
- class Parent extends React.Component {
348
- render() {
349
- return React.cloneElement(this.props.child, {color: 123});
350
- }
351
- }
352
- class GrandParent extends React.Component {
353
- render() {
354
- return React.createElement(Parent, {
355
- child: React.createElement(Component, {color: 'red'}),
356
- });
357
- }
358
- }
359
- const root = ReactDOMClient.createRoot(document.createElement('div'));
360
- await expect(
361
- async () =>
362
- await act(() => root.render(React.createElement(GrandParent))),
363
- ).toErrorDev(
364
- 'Warning: Failed prop type: ' +
365
- 'Invalid prop `color` of type `number` supplied to `Component`, ' +
366
- 'expected `string`.\n' +
367
- ' in Component (at **)\n' +
368
- ' in Parent (at **)\n' +
369
- ' in GrandParent',
370
- );
371
- });
372
-
336
it('should ignore key and ref warning getters', () => {
337
const elementA = React.createElement('div');
338
const elementB = React.cloneElement(elementA, elementA.props);
packages/react/src/__tests__/ReactElementValidator-test.internal.js
+6
-134
@@ -15,7 +15,6 @@
15
// that do use JSX syntax. We should port them to React.createElement, and also
16
// confirm there's a corresponding test that uses JSX syntax.
17
18
-let PropTypes;
18
let React;
19
let ReactDOMClient;
20
let act;
@@ -28,7 +27,6 @@ describe('ReactElementValidator', () => {
27
beforeEach(() => {
28
jest.resetModules();
29
31
- PropTypes = require('prop-types');
30
ReactFeatureFlags = require('shared/ReactFeatureFlags');
31
ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
32
React = require('react');
@@ -221,26 +219,19 @@ describe('ReactElementValidator', () => {
219
React.createElement(ComponentClass, null, [{}, {}]);
220
});
221
224
- it('should give context for PropType errors in nested components.', async () => {
225
- // In this test, we're making sure that if a proptype error is found in a
226
- // component, we give a small hint as to which parent instantiated that
227
- // component as per warnings about key usage in ReactElementValidator.
228
- function MyComp(props) {
229
- return React.createElement('div', null, 'My color is ' + props.color);
222
+ it('should give context for errors in nested components.', async () => {
223
+ function MyComp() {
224
+ return [React.createElement('div')];
225
}
231
- MyComp.propTypes = {
232
- color: PropTypes.string,
233
- };
226
function ParentComp() {
235
- return React.createElement(MyComp, {color: 123});
227
+ return React.createElement(MyComp);
228
}
229
await expect(async () => {
230
const root = ReactDOMClient.createRoot(document.createElement('div'));
231
await act(() => root.render(React.createElement(ParentComp)));
232
}).toErrorDev(
241
- 'Warning: Failed prop type: ' +
242
- 'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
243
- 'expected `string`.\n' +
233
+ 'Each child in a list should have a unique "key" prop. ' +
234
+ 'See https://reactjs.org/link/warning-keys for more information.\n' +
235
' in MyComp (at **)\n' +
236
' in ParentComp (at **)',
237
);
@@ -328,125 +319,6 @@ describe('ReactElementValidator', () => {
319
]);
320
});
321
331
- it('should check default prop values', async () => {
332
- class Component extends React.Component {
333
- static propTypes = {prop: PropTypes.string.isRequired};
334
- static defaultProps = {prop: null};
335
- render() {
336
- return React.createElement('span', null, this.props.prop);
337
- }
338
- }
339
-
340
- await expect(async () => {
341
- const root = ReactDOMClient.createRoot(document.createElement('div'));
342
- await act(() => root.render(React.createElement(Component)));
343
- }).toErrorDev(
344
- 'Warning: Failed prop type: The prop `prop` is marked as required in ' +
345
- '`Component`, but its value is `null`.\n' +
346
- ' in Component',
347
- );
348
- });
349
-
350
- it('should not check the default for explicit null', async () => {
351
- class Component extends React.Component {
352
- static propTypes = {prop: PropTypes.string.isRequired};
353
- static defaultProps = {prop: 'text'};
354
- render() {
355
- return React.createElement('span', null, this.props.prop);
356
- }
357
- }
358
-
359
- await expect(async () => {
360
- const root = ReactDOMClient.createRoot(document.createElement('div'));
361
- await act(() =>
362
- root.render(React.createElement(Component, {prop: null})),
363
- );
364
- }).toErrorDev(
365
- 'Warning: Failed prop type: The prop `prop` is marked as required in ' +
366
- '`Component`, but its value is `null`.\n' +
367
- ' in Component',
368
- );
369
- });
370
-
371
- it('should check declared prop types', async () => {
372
- class Component extends React.Component {
373
- static propTypes = {
374
- prop: PropTypes.string.isRequired,
375
- };
376
- render() {
377
- return React.createElement('span', null, this.props.prop);
378
- }
379
- }
380
-
381
- const root = ReactDOMClient.createRoot(document.createElement('div'));
382
- await expect(async () => {
383
- await act(() => root.render(React.createElement(Component)));
384
- await act(() => root.render(React.createElement(Component, {prop: 42})));
385
- }).toErrorDev([
386
- 'Warning: Failed prop type: ' +
387
- 'The prop `prop` is marked as required in `Component`, but its value ' +
388
- 'is `undefined`.\n' +
389
- ' in Component',
390
- 'Warning: Failed prop type: ' +
391
- 'Invalid prop `prop` of type `number` supplied to ' +
392
- '`Component`, expected `string`.\n' +
393
- ' in Component',
394
- ]);
395
-
396
- // Should not error for strings
397
- await act(() =>
398
- root.render(React.createElement(Component, {prop: 'string'})),
399
- );
400
- });
401
-
402
- it('should warn if a PropType creator is used as a PropType', async () => {
403
- class Component extends React.Component {
404
- static propTypes = {
405
- myProp: PropTypes.shape,
406
- };
407
- render() {
408
- return React.createElement('span', null, this.props.myProp.value);
409
- }
410
- }
411
-
412
- await expect(async () => {
413
- const root = ReactDOMClient.createRoot(document.createElement('div'));
414
- await act(() =>
415
- root.render(React.createElement(Component, {myProp: {value: 'hi'}})),
416
- );
417
- }).toErrorDev(
418
- 'Warning: Component: type specification of prop `myProp` is invalid; ' +
419
- 'the type checker function must return `null` or an `Error` but ' +
420
- 'returned a function. You may have forgotten to pass an argument to ' +
421
- 'the type checker creator (arrayOf, instanceOf, objectOf, oneOf, ' +
422
- 'oneOfType, and shape all require an argument).',
423
- );
424
- });
425
-
426
- it('should warn if component declares PropTypes instead of propTypes', async () => {
427
- class MisspelledPropTypesComponent extends React.Component {
428
- static PropTypes = {
429
- prop: PropTypes.string,
430
- };
431
- render() {
432
- return React.createElement('span', null, this.props.prop);
433
- }
434
- }
435
-
436
- await expect(async () => {
437
- const root = ReactDOMClient.createRoot(document.createElement('div'));
438
- await act(() =>
439
- root.render(
440
- React.createElement(MisspelledPropTypesComponent, {prop: 'Hi'}),
441
- ),
442
- );
443
- }).toErrorDev(
444
- 'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
445
- 'instead of `propTypes`. Did you misspell the property assignment?',
446
- {withoutStack: true},
447
- );
448
- });
449
-
322
it('warns for fragments with illegal attributes', async () => {
323
class Foo extends React.Component {
324
render() {
packages/react/src/__tests__/ReactJSXElementValidator-test.js
+5
-175
@@ -12,11 +12,7 @@
12
// TODO: All these warnings should become static errors using Flow instead
13
// of dynamic errors when using JSX with Flow.
14
let React;
15
-let ReactDOM;
16
-let ReactDOMClient;
15
let ReactTestUtils;
18
-let PropTypes;
19
-let act;
16
17
describe('ReactJSXElementValidator', () => {
18
let Component;
@@ -25,12 +21,8 @@ describe('ReactJSXElementValidator', () => {
21
beforeEach(() => {
22
jest.resetModules();
23
28
- PropTypes = require('prop-types');
24
React = require('react');
30
- ReactDOM = require('react-dom');
31
- ReactDOMClient = require('react-dom/client');
25
ReactTestUtils = require('react-dom/test-utils');
33
- act = require('internal-test-utils').act;
26
27
Component = class extends React.Component {
28
render() {
@@ -44,7 +36,6 @@ describe('ReactJSXElementValidator', () => {
36
}
37
};
38
RequiredPropComponent.displayName = 'RequiredPropComponent';
47
- RequiredPropComponent.propTypes = {prop: PropTypes.string.isRequired};
39
});
40
41
it('warns for keys for arrays of elements in children position', () => {
@@ -150,70 +141,25 @@ describe('ReactJSXElementValidator', () => {
141
void (<Component>{[{}, {}]}</Component>);
142
});
143
153
- it('should give context for PropType errors in nested components.', () => {
154
- // In this test, we're making sure that if a proptype error is found in a
155
- // component, we give a small hint as to which parent instantiated that
156
- // component as per warnings about key usage in ReactElementValidator.
144
+ it('should give context for errors in nested components.', () => {
145
class MyComp extends React.Component {
146
render() {
159
- return <div>My color is {this.color}</div>;
147
+ return [<div />];
148
}
149
}
162
- MyComp.propTypes = {
163
- color: PropTypes.string,
164
- };
150
class ParentComp extends React.Component {
151
render() {
167
- return <MyComp color={123} />;
152
+ return <MyComp />;
153
}
154
}
155
expect(() => ReactTestUtils.renderIntoDocument(<ParentComp />)).toErrorDev(
171
- 'Warning: Failed prop type: ' +
172
- 'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
173
- 'expected `string`.\n' +
156
+ 'Each child in a list should have a unique "key" prop. ' +
157
+ 'See https://reactjs.org/link/warning-keys for more information.\n' +
158
' in MyComp (at **)\n' +
159
' in ParentComp (at **)',
160
);
161
});
162
179
- it('should update component stack after receiving next element', async () => {
180
- function MyComp() {
181
- return null;
182
- }
183
- MyComp.propTypes = {
184
- color: PropTypes.string,
185
- };
186
- function MiddleComp(props) {
187
- return <MyComp color={props.color} />;
188
- }
189
- function ParentComp(props) {
190
- if (props.warn) {
191
- // This element has a source thanks to JSX.
192
- return <MiddleComp color={42} />;
193
- }
194
- // This element has no source.
195
- return React.createElement(MiddleComp, {color: 'blue'});
196
- }
197
-
198
- const container = document.createElement('div');
199
- const root = ReactDOMClient.createRoot(container);
200
- await act(() => {
201
- root.render(<ParentComp warn={false} />);
202
- });
203
- expect(() =>
204
- ReactDOM.flushSync(() => {
205
- root.render(<ParentComp warn={true} />);
206
- }),
207
- ).toErrorDev(
208
- 'Warning: Failed prop type: ' +
209
- 'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
210
- 'expected `string`.\n' +
211
- ' in MyComp (at **)\n' +
212
- ' in MiddleComp (at **)\n' +
213
- ' in ParentComp (at **)',
214
- );
215
- });
216
-
163
it('gives a helpful error when passing null, undefined, or boolean', () => {
164
const Undefined = undefined;
165
const Null = null;
@@ -246,122 +192,6 @@ describe('ReactJSXElementValidator', () => {
192
void (<Div />);
193
});
194
249
- it('should check default prop values', () => {
250
- RequiredPropComponent.defaultProps = {prop: null};
251
-
252
- expect(() =>
253
- ReactTestUtils.renderIntoDocument(<RequiredPropComponent />),
254
- ).toErrorDev(
255
- 'Warning: Failed prop type: The prop `prop` is marked as required in ' +
256
- '`RequiredPropComponent`, but its value is `null`.\n' +
257
- ' in RequiredPropComponent (at **)',
258
- );
259
- });
260
-
261
- it('should not check the default for explicit null', () => {
262
- expect(() =>
263
- ReactTestUtils.renderIntoDocument(<RequiredPropComponent prop={null} />),
264
- ).toErrorDev(
265
- 'Warning: Failed prop type: The prop `prop` is marked as required in ' +
266
- '`RequiredPropComponent`, but its value is `null`.\n' +
267
- ' in RequiredPropComponent (at **)',
268
- );
269
- });
270
-
271
- it('should check declared prop types', () => {
272
- expect(() =>
273
- ReactTestUtils.renderIntoDocument(<RequiredPropComponent />),
274
- ).toErrorDev(
275
- 'Warning: Failed prop type: ' +
276
- 'The prop `prop` is marked as required in `RequiredPropComponent`, but ' +
277
- 'its value is `undefined`.\n' +
278
- ' in RequiredPropComponent (at **)',
279
- );
280
- expect(() =>
281
- ReactTestUtils.renderIntoDocument(<RequiredPropComponent prop={42} />),
282
- ).toErrorDev(
283
- 'Warning: Failed prop type: ' +
284
- 'Invalid prop `prop` of type `number` supplied to ' +
285
- '`RequiredPropComponent`, expected `string`.\n' +
286
- ' in RequiredPropComponent (at **)',
287
- );
288
-
289
- // Should not error for strings
290
- ReactTestUtils.renderIntoDocument(<RequiredPropComponent prop="string" />);
291
- });
292
-
293
- it('should warn on invalid prop types', () => {
294
- // Since there is no prevalidation step for ES6 classes, there is no hook
295
- // for us to issue a warning earlier than element creation when the error
296
- // actually occurs. Since this step is skipped in production, we should just
297
- // warn instead of throwing for this case.
298
- class NullPropTypeComponent extends React.Component {
299
- render() {
300
- return <span>{this.props.prop}</span>;
301
- }
302
- }
303
- NullPropTypeComponent.propTypes = {
304
- prop: null,
305
- };
306
- expect(() =>
307
- ReactTestUtils.renderIntoDocument(<NullPropTypeComponent />),
308
- ).toErrorDev(
309
- 'NullPropTypeComponent: prop type `prop` is invalid; it must be a ' +
310
- 'function, usually from the `prop-types` package,',
311
- );
312
- });
313
-
314
- // @gate !disableLegacyContext || !__DEV__
315
- it('should not warn on invalid context types', () => {
316
- class NullContextTypeComponent extends React.Component {
317
- render() {
318
- return <span>{this.props.prop}</span>;
319
- }
320
- }
321
- NullContextTypeComponent.contextTypes = {
322
- prop: null,
323
- };
324
- ReactTestUtils.renderIntoDocument(<NullContextTypeComponent />);
325
- });
326
-
327
- it('should warn if getDefaultProps is specified on the class', () => {
328
- class GetDefaultPropsComponent extends React.Component {
329
- render() {
330
- return <span>{this.props.prop}</span>;
331
- }
332
- }
333
- GetDefaultPropsComponent.getDefaultProps = () => ({
334
- prop: 'foo',
335
- });
336
- expect(() =>
337
- ReactTestUtils.renderIntoDocument(<GetDefaultPropsComponent />),
338
- ).toErrorDev(
339
- 'getDefaultProps is only used on classic React.createClass definitions.' +
340
- ' Use a static property named `defaultProps` instead.',
341
- {withoutStack: true},
342
- );
343
- });
344
-
345
- it('should warn if component declares PropTypes instead of propTypes', () => {
346
- class MisspelledPropTypesComponent extends React.Component {
347
- render() {
348
- return <span>{this.props.prop}</span>;
349
- }
350
- }
351
- MisspelledPropTypesComponent.PropTypes = {
352
- prop: PropTypes.string,
353
- };
354
- expect(() =>
355
- ReactTestUtils.renderIntoDocument(
356
- <MisspelledPropTypesComponent prop="hi" />,
357
- ),
358
- ).toErrorDev(
359
- 'Warning: Component MisspelledPropTypesComponent declared `PropTypes` ' +
360
- 'instead of `propTypes`. Did you misspell the property assignment?',
361
- {withoutStack: true},
362
- );
363
- });
364
-
195
it('warns for fragments with illegal attributes', () => {
196
class Foo extends React.Component {
197
render() {
packages/react/src/jsx/ReactJSXElement.js
-64
@@ -12,15 +12,12 @@ import assign from 'shared/assign';
12
import {
13
getIteratorFn,
14
REACT_ELEMENT_TYPE,
15
- REACT_FORWARD_REF_TYPE,
16
- REACT_MEMO_TYPE,
15
REACT_FRAGMENT_TYPE,
16
} from 'shared/ReactSymbols';
17
import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
18
import isValidElementType from 'shared/isValidElementType';
19
import isArray from 'shared/isArray';
20
import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
23
-import checkPropTypes from 'shared/checkPropTypes';
21
import {enableRefAsProp} from 'shared/ReactFeatureFlags';
22
23
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -596,8 +593,6 @@ export function jsxDEV(type, config, maybeKey, isStaticChildren, source, self) {
593
594
if (type === REACT_FRAGMENT_TYPE) {
595
validateFragmentProps(element);
599
- } else {
600
- validatePropTypes(element);
596
}
597
598
return element;
@@ -768,8 +763,6 @@ export function createElement(type, config, children) {
763
764
if (type === REACT_FRAGMENT_TYPE) {
765
validateFragmentProps(element);
771
- } else {
772
- validatePropTypes(element);
766
}
767
768
return element;
@@ -930,7 +923,6 @@ export function cloneElement(element, config, children) {
923
for (let i = 2; i < arguments.length; i++) {
924
validateChildKeys(arguments[i], clonedElement.type);
925
}
933
- validatePropTypes(clonedElement);
926
927
return clonedElement;
928
}
@@ -1137,59 +1129,3 @@ function validateFragmentProps(fragment) {
1129
}
1130
}
1131
}
1140
-
1141
-let propTypesMisspellWarningShown = false;
1142
-
1143
-/**
1144
- * Given an element, validate that its props follow the propTypes definition,
1145
- * provided by the type.
1146
- *
1147
- * @param {ReactElement} element
1148
- */
1149
-function validatePropTypes(element) {
1150
- if (__DEV__) {
1151
- const type = element.type;
1152
- if (type === null || type === undefined || typeof type === 'string') {
1153
- return;
1154
- }
1155
- if (type.$$typeof === REACT_CLIENT_REFERENCE) {
1156
- return;
1157
- }
1158
- let propTypes;
1159
- if (typeof type === 'function') {
1160
- propTypes = type.propTypes;
1161
- } else if (
1162
- typeof type === 'object' &&
1163
- (type.$$typeof === REACT_FORWARD_REF_TYPE ||
1164
- // Note: Memo only checks outer props here.
1165
- // Inner props are checked in the reconciler.
1166
- type.$$typeof === REACT_MEMO_TYPE)
1167
- ) {
1168
- propTypes = type.propTypes;
1169
- } else {
1170
- return;
1171
- }
1172
- if (propTypes) {
1173
- // Intentionally inside to avoid triggering lazy initializers:
1174
- const name = getComponentNameFromType(type);
1175
- checkPropTypes(propTypes, element.props, 'prop', name, element);
1176
- } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
1177
- propTypesMisspellWarningShown = true;
1178
- // Intentionally inside to avoid triggering lazy initializers:
1179
- const name = getComponentNameFromType(type);
1180
- console.error(
1181
- 'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
1182
- name || 'Unknown',
1183
- );
1184
- }
1185
- if (
1186
- typeof type.getDefaultProps === 'function' &&
1187
- !type.getDefaultProps.isReactClassApproved
1188
- ) {
1189
- console.error(
1190
- 'getDefaultProps is only used on classic React.createClass ' +
1191
- 'definitions. Use a static property named `defaultProps` instead.',
1192
- );
1193
- }
1194
- }
1195
-}
packages/shared/checkPropTypes.js
deleted
-108
@@ -1,108 +0,0 @@
1
-/**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
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
- * @flow
8
- */
9
-
10
-const loggedTypeFailures: {[string]: boolean} = {};
11
-
12
-import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
13
-
14
-import ReactSharedInternals from 'shared/ReactSharedInternals';
15
-import hasOwnProperty from 'shared/hasOwnProperty';
16
-
17
-const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
18
-
19
-function setCurrentlyValidatingElement(element: any) {
20
- if (__DEV__) {
21
- if (element) {
22
- const owner = element._owner;
23
- const stack = describeUnknownElementTypeFrameInDEV(
24
- element.type,
25
- owner ? owner.type : null,
26
- );
27
- ReactDebugCurrentFrame.setExtraStackFrame(stack);
28
- } else {
29
- ReactDebugCurrentFrame.setExtraStackFrame(null);
30
- }
31
- }
32
-}
33
-
34
-export default function checkPropTypes(
35
- typeSpecs: Object,
36
- values: Object,
37
- location: string,
38
- componentName: ?string,
39
- element?: any,
40
-): void {
41
- if (__DEV__) {
42
- // $FlowFixMe[incompatible-use] This is okay but Flow doesn't know it.
43
- const has = Function.call.bind(hasOwnProperty);
44
- for (const typeSpecName in typeSpecs) {
45
- if (has(typeSpecs, typeSpecName)) {
46
- let error;
47
- // Prop type validation may throw. In case they do, we don't want to
48
- // fail the render phase where it didn't fail before. So we log it.
49
- // After these have been cleaned up, we'll let them throw.
50
- try {
51
- // This is intentionally an invariant that gets caught. It's the same
52
- // behavior as without this statement except with a better message.
53
- if (typeof typeSpecs[typeSpecName] !== 'function') {
54
- // eslint-disable-next-line react-internal/prod-error-codes
55
- const err = Error(
56
- (componentName || 'React class') +
57
- ': ' +
58
- location +
59
- ' type `' +
60
- typeSpecName +
61
- '` is invalid; ' +
62
- 'it must be a function, usually from the `prop-types` package, but received `' +
63
- typeof typeSpecs[typeSpecName] +
64
- '`.' +
65
- 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.',
66
- );
67
- err.name = 'Invariant Violation';
68
- throw err;
69
- }
70
- error = typeSpecs[typeSpecName](
71
- values,
72
- typeSpecName,
73
- componentName,
74
- location,
75
- null,
76
- 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED',
77
- );
78
- } catch (ex) {
79
- error = ex;
80
- }
81
- if (error && !(error instanceof Error)) {
82
- setCurrentlyValidatingElement(element);
83
- console.error(
84
- '%s: type specification of %s' +
85
- ' `%s` is invalid; the type checker ' +
86
- 'function must return `null` or an `Error` but returned a %s. ' +
87
- 'You may have forgotten to pass an argument to the type checker ' +
88
- 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
89
- 'shape all require an argument).',
90
- componentName || 'React class',
91
- location,
92
- typeSpecName,
93
- typeof error,
94
- );
95
- setCurrentlyValidatingElement(null);
96
- }
97
- if (error instanceof Error && !(error.message in loggedTypeFailures)) {
98
- // Only monitor this failure once because there tends to be a lot of the
99
- // same error.
100
- loggedTypeFailures[error.message] = true;
101
- setCurrentlyValidatingElement(element);
102
- console.error('Failed %s type: %s', location, error.message);
103
- setCurrentlyValidatingElement(null);
104
- }
105
- }
106
- }
107
- }
108
-}