React · Theory

PropTypes in React

Theory

56/94

PropTypes in React

PropTypes is a runtime checker you attach to a function or class: MyComp.propTypes = { … }. isRequired marks must-have props. defaultProps (or default parameters) fill gaps. You import from 'prop-types', not from 'react' (that split happened years ago).

If the team already uses TypeScript, don’t add PropTypes ‘for extra safety’ on every file — you’ll maintain two sources of truth. Pick one.

PropTypes in React — on screen — Pen × 1. Missing qty uses default. Wrong type → dev warning.

Exam tip

prop-types package + isRequired. TS in new code.

Example

// PropTypes + default
import PropTypes from "prop-types";

function Item({ title, qty }) {
  return <li>{title} × {qty}</li>;
}

Item.propTypes = {
  title: PropTypes.string.isRequired,
  qty: PropTypes.number,
};
Item.defaultProps = { qty: 1 };

PropTypes in React — on screen: Pen × 1. Missing qty uses default. Wrong type → dev warning.

Short notes

DefRuntime prop checks (dev).
Pkg : prop-types.
Now : TS usually replaces it.

// PropTypes + default import PropTypes from "prop-types"; function Item({ title, qty }) { return <li>{title} × {qty}</li>; } Item.propTypes = { title: PropTypes.string.isRequired, qty: PropTypes.number, }; Item.defaultProps = { qty: 1 };

PropTypes in React

Example

Short notes

Questions

PropTypes in React

Example

Short notes

Questions