easyFrontend

What is `PropTypes` and when would you use it?

Q: What is `PropTypes` and when would you use it?

**Core concept (TL;DR).** PropTypes (the prop-types package) is a **runtime** type-checker for component props: in **development** it warns in the console when a prop is the wrong type or a required prop is missing. It predates TypeScript adoption — today TS is preferred (compile-time), but PropTypes is still useful in **plain-JS** codebases or libraries. Runtime prop validation (dev warnings) <text x="135" y="64" fill="#f59e0b" font-size="11" font-weight="700" text-ancho

1.1k views

Understand the problem

Describe the role of PropTypes in React for type-checking component props.

prop-typestype checkingvalidationdevelopment

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Declaring propTypes

import PropTypes from "prop-types";

function Greeting({ name, age }) {
  return <p style={{ fontFamily: "system-ui" }}>Hi {name}, age {age}</p>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,   // warns in dev if missing/wrong type
  age: PropTypes.number,
};
Greeting.defaultProps = { age: 0 };

export default function App() {
  // Passing age="oops" would log a dev warning (string, not number)
  return <Greeting name="Ada" age={36} />;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are React Hooks? Name a few common ones.

How do you handle side effects in functional components?