Skip to content

Commit d319f43

Browse files
gaearongaearon
committed
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.) DiffTrain build for [353ecd0](353ecd0)
1 parent 6b820da commit d319f43

8 files changed

+23
-896
lines changed

‎compiled/facebook-www/JSXDEVRuntime-dev.classic.js

-172
Original file line numberDiff line numberDiff line change
@@ -807,111 +807,6 @@ if (__DEV__) {
807807
return "";
808808
}
809809

810-
var loggedTypeFailures = {};
811-
var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
812-
813-
function setCurrentlyValidatingElement$1(element) {
814-
{
815-
if (element) {
816-
var owner = element._owner;
817-
var stack = describeUnknownElementTypeFrameInDEV(
818-
element.type,
819-
owner ? owner.type : null
820-
);
821-
ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
822-
} else {
823-
ReactDebugCurrentFrame$1.setExtraStackFrame(null);
824-
}
825-
}
826-
}
827-
828-
function checkPropTypes(
829-
typeSpecs,
830-
values,
831-
location,
832-
componentName,
833-
element
834-
) {
835-
{
836-
// $FlowFixMe[incompatible-use] This is okay but Flow doesn't know it.
837-
var has = Function.call.bind(hasOwnProperty);
838-
839-
for (var typeSpecName in typeSpecs) {
840-
if (has(typeSpecs, typeSpecName)) {
841-
var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
842-
// fail the render phase where it didn't fail before. So we log it.
843-
// After these have been cleaned up, we'll let them throw.
844-
845-
try {
846-
// This is intentionally an invariant that gets caught. It's the same
847-
// behavior as without this statement except with a better message.
848-
if (typeof typeSpecs[typeSpecName] !== "function") {
849-
// eslint-disable-next-line react-internal/prod-error-codes
850-
var err = Error(
851-
(componentName || "React class") +
852-
": " +
853-
location +
854-
" type `" +
855-
typeSpecName +
856-
"` is invalid; " +
857-
"it must be a function, usually from the `prop-types` package, but received `" +
858-
typeof typeSpecs[typeSpecName] +
859-
"`." +
860-
"This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
861-
);
862-
err.name = "Invariant Violation";
863-
throw err;
864-
}
865-
866-
error$1 = typeSpecs[typeSpecName](
867-
values,
868-
typeSpecName,
869-
componentName,
870-
location,
871-
null,
872-
"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"
873-
);
874-
} catch (ex) {
875-
error$1 = ex;
876-
}
877-
878-
if (error$1 && !(error$1 instanceof Error)) {
879-
setCurrentlyValidatingElement$1(element);
880-
881-
error(
882-
"%s: type specification of %s" +
883-
" `%s` is invalid; the type checker " +
884-
"function must return `null` or an `Error` but returned a %s. " +
885-
"You may have forgotten to pass an argument to the type checker " +
886-
"creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and " +
887-
"shape all require an argument).",
888-
componentName || "React class",
889-
location,
890-
typeSpecName,
891-
typeof error$1
892-
);
893-
894-
setCurrentlyValidatingElement$1(null);
895-
}
896-
897-
if (
898-
error$1 instanceof Error &&
899-
!(error$1.message in loggedTypeFailures)
900-
) {
901-
// Only monitor this failure once because there tends to be a lot of the
902-
// same error.
903-
loggedTypeFailures[error$1.message] = true;
904-
setCurrentlyValidatingElement$1(element);
905-
906-
error("Failed %s type: %s", location, error$1.message);
907-
908-
setCurrentlyValidatingElement$1(null);
909-
}
910-
}
911-
}
912-
}
913-
}
914-
915810
var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
916811
var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
917812
var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
@@ -1314,8 +1209,6 @@ if (__DEV__) {
13141209

13151210
if (type === REACT_FRAGMENT_TYPE) {
13161211
validateFragmentProps(element);
1317-
} else {
1318-
validatePropTypes(element);
13191212
}
13201213

13211214
return element;
@@ -1542,71 +1435,6 @@ if (__DEV__) {
15421435
}
15431436
}
15441437

1545-
var propTypesMisspellWarningShown = false;
1546-
/**
1547-
* Given an element, validate that its props follow the propTypes definition,
1548-
* provided by the type.
1549-
*
1550-
* @param {ReactElement} element
1551-
*/
1552-
1553-
function validatePropTypes(element) {
1554-
{
1555-
var type = element.type;
1556-
1557-
if (type === null || type === undefined || typeof type === "string") {
1558-
return;
1559-
}
1560-
1561-
if (type.$$typeof === REACT_CLIENT_REFERENCE) {
1562-
return;
1563-
}
1564-
1565-
var propTypes;
1566-
1567-
if (typeof type === "function") {
1568-
propTypes = type.propTypes;
1569-
} else if (
1570-
typeof type === "object" &&
1571-
(type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
1572-
// Inner props are checked in the reconciler.
1573-
type.$$typeof === REACT_MEMO_TYPE)
1574-
) {
1575-
propTypes = type.propTypes;
1576-
} else {
1577-
return;
1578-
}
1579-
1580-
if (propTypes) {
1581-
// Intentionally inside to avoid triggering lazy initializers:
1582-
var name = getComponentNameFromType(type);
1583-
checkPropTypes(propTypes, element.props, "prop", name, element);
1584-
} else if (
1585-
type.PropTypes !== undefined &&
1586-
!propTypesMisspellWarningShown
1587-
) {
1588-
propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
1589-
1590-
var _name = getComponentNameFromType(type);
1591-
1592-
error(
1593-
"Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",
1594-
_name || "Unknown"
1595-
);
1596-
}
1597-
1598-
if (
1599-
typeof type.getDefaultProps === "function" &&
1600-
!type.getDefaultProps.isReactClassApproved
1601-
) {
1602-
error(
1603-
"getDefaultProps is only used on classic React.createClass " +
1604-
"definitions. Use a static property named `defaultProps` instead."
1605-
);
1606-
}
1607-
}
1608-
}
1609-
16101438
var jsxDEV = jsxDEV$1;
16111439

16121440
exports.Fragment = REACT_FRAGMENT_TYPE;

‎compiled/facebook-www/JSXDEVRuntime-dev.modern.js

-172
Original file line numberDiff line numberDiff line change
@@ -807,111 +807,6 @@ if (__DEV__) {
807807
return "";
808808
}
809809

810-
var loggedTypeFailures = {};
811-
var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
812-
813-
function setCurrentlyValidatingElement$1(element) {
814-
{
815-
if (element) {
816-
var owner = element._owner;
817-
var stack = describeUnknownElementTypeFrameInDEV(
818-
element.type,
819-
owner ? owner.type : null
820-
);
821-
ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
822-
} else {
823-
ReactDebugCurrentFrame$1.setExtraStackFrame(null);
824-
}
825-
}
826-
}
827-
828-
function checkPropTypes(
829-
typeSpecs,
830-
values,
831-
location,
832-
componentName,
833-
element
834-
) {
835-
{
836-
// $FlowFixMe[incompatible-use] This is okay but Flow doesn't know it.
837-
var has = Function.call.bind(hasOwnProperty);
838-
839-
for (var typeSpecName in typeSpecs) {
840-
if (has(typeSpecs, typeSpecName)) {
841-
var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
842-
// fail the render phase where it didn't fail before. So we log it.
843-
// After these have been cleaned up, we'll let them throw.
844-
845-
try {
846-
// This is intentionally an invariant that gets caught. It's the same
847-
// behavior as without this statement except with a better message.
848-
if (typeof typeSpecs[typeSpecName] !== "function") {
849-
// eslint-disable-next-line react-internal/prod-error-codes
850-
var err = Error(
851-
(componentName || "React class") +
852-
": " +
853-
location +
854-
" type `" +
855-
typeSpecName +
856-
"` is invalid; " +
857-
"it must be a function, usually from the `prop-types` package, but received `" +
858-
typeof typeSpecs[typeSpecName] +
859-
"`." +
860-
"This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
861-
);
862-
err.name = "Invariant Violation";
863-
throw err;
864-
}
865-
866-
error$1 = typeSpecs[typeSpecName](
867-
values,
868-
typeSpecName,
869-
componentName,
870-
location,
871-
null,
872-
"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"
873-
);
874-
} catch (ex) {
875-
error$1 = ex;
876-
}
877-
878-
if (error$1 && !(error$1 instanceof Error)) {
879-
setCurrentlyValidatingElement$1(element);
880-
881-
error(
882-
"%s: type specification of %s" +
883-
" `%s` is invalid; the type checker " +
884-
"function must return `null` or an `Error` but returned a %s. " +
885-
"You may have forgotten to pass an argument to the type checker " +
886-
"creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and " +
887-
"shape all require an argument).",
888-
componentName || "React class",
889-
location,
890-
typeSpecName,
891-
typeof error$1
892-
);
893-
894-
setCurrentlyValidatingElement$1(null);
895-
}
896-
897-
if (
898-
error$1 instanceof Error &&
899-
!(error$1.message in loggedTypeFailures)
900-
) {
901-
// Only monitor this failure once because there tends to be a lot of the
902-
// same error.
903-
loggedTypeFailures[error$1.message] = true;
904-
setCurrentlyValidatingElement$1(element);
905-
906-
error("Failed %s type: %s", location, error$1.message);
907-
908-
setCurrentlyValidatingElement$1(null);
909-
}
910-
}
911-
}
912-
}
913-
}
914-
915810
var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
916811
var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
917812
var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
@@ -1314,8 +1209,6 @@ if (__DEV__) {
13141209

13151210
if (type === REACT_FRAGMENT_TYPE) {
13161211
validateFragmentProps(element);
1317-
} else {
1318-
validatePropTypes(element);
13191212
}
13201213

13211214
return element;
@@ -1542,71 +1435,6 @@ if (__DEV__) {
15421435
}
15431436
}
15441437

1545-
var propTypesMisspellWarningShown = false;
1546-
/**
1547-
* Given an element, validate that its props follow the propTypes definition,
1548-
* provided by the type.
1549-
*
1550-
* @param {ReactElement} element
1551-
*/
1552-
1553-
function validatePropTypes(element) {
1554-
{
1555-
var type = element.type;
1556-
1557-
if (type === null || type === undefined || typeof type === "string") {
1558-
return;
1559-
}
1560-
1561-
if (type.$$typeof === REACT_CLIENT_REFERENCE) {
1562-
return;
1563-
}
1564-
1565-
var propTypes;
1566-
1567-
if (typeof type === "function") {
1568-
propTypes = type.propTypes;
1569-
} else if (
1570-
typeof type === "object" &&
1571-
(type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
1572-
// Inner props are checked in the reconciler.
1573-
type.$$typeof === REACT_MEMO_TYPE)
1574-
) {
1575-
propTypes = type.propTypes;
1576-
} else {
1577-
return;
1578-
}
1579-
1580-
if (propTypes) {
1581-
// Intentionally inside to avoid triggering lazy initializers:
1582-
var name = getComponentNameFromType(type);
1583-
checkPropTypes(propTypes, element.props, "prop", name, element);
1584-
} else if (
1585-
type.PropTypes !== undefined &&
1586-
!propTypesMisspellWarningShown
1587-
) {
1588-
propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
1589-
1590-
var _name = getComponentNameFromType(type);
1591-
1592-
error(
1593-
"Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",
1594-
_name || "Unknown"
1595-
);
1596-
}
1597-
1598-
if (
1599-
typeof type.getDefaultProps === "function" &&
1600-
!type.getDefaultProps.isReactClassApproved
1601-
) {
1602-
error(
1603-
"getDefaultProps is only used on classic React.createClass " +
1604-
"definitions. Use a static property named `defaultProps` instead."
1605-
);
1606-
}
1607-
}
1608-
}
1609-
16101438
var jsxDEV = jsxDEV$1;
16111439

16121440
exports.Fragment = REACT_FRAGMENT_TYPE;

‎compiled/facebook-www/REVISION

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
4ea424e63d1a74ce57ef675b64a8c4eabfdb2fdc
1+
353ecd05160a318a3f75260ee7906fd12e05cb9d

0 commit comments

Comments
 (0)