React · Theory

Props Validation in React

Theory

14/94

Props Validation in React

Validation means catching wrong prop types before the UI silently breaks. New apps: TypeScript — amount: number on the component props type. Old JS apps: the prop-types package, Hello.propTypes = { name: PropTypes.string.isRequired }.

PropTypes usually warn in development, they don’t always crash production. Don’t treat them as security. They’re a teacher’s red pen, not a firewall.

Props Validation in React — output — warn: name should be string. PropTypes warn in dev. TS catches this at compile.

Diagram

Parent
    │ amount={199}
    ▼
  Price → ₹199

Exam tip

TS first. PropTypes in legacy JS.

Example

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

function Hello({ name }) {
  return <p>Hi {name}</p>;
}

Hello.propTypes = {
  name: PropTypes.string.isRequired,
};

Props Validation in React — output: warn: name should be string. PropTypes warn in dev. TS catches this at compile.

Short notes

Now : TypeScript props.
Old : prop-types warnings.
TrapThinking PropTypes secures an API.

React · Theory

Props Validation in React

← All stacks

Theory

14/94

Props Validation in React

PropTypes usually warn in development, they don’t always crash production. Don’t treat them as security. They’re a teacher’s red pen, not a firewall.

Props Validation in React — output — warn: name should be string. PropTypes warn in dev. TS catches this at compile.

Diagram

Parent
    │ amount={199}
    ▼
  Price → ₹199

Exam tip

TS first. PropTypes in legacy JS.

Example

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

function Hello({ name }) {
  return <p>Hi {name}</p>;
}

Hello.propTypes = {
  name: PropTypes.string.isRequired,
};

Props Validation in React — output: warn: name should be string. PropTypes warn in dev. TS catches this at compile.

Short notes

Now : TypeScript props.
Old : prop-types warnings.
TrapThinking PropTypes secures an API.

Props Validation in React

Example

Short notes

Questions

Props Validation in React

Example

Short notes

Questions