Explain props in React and how parent components pass data to children

WHAT THIS TESTS: Props are the fundamental abstraction for component communication in React. At a senior level, this question checks whether you treat props as an immutable, unidirectional contract rather than just a syntax feature. The interviewer wants to hear that you understand props enforce isolation between parent and child, that they are the sole input to a component function, and that violating their immutability breaks React's rendering assumptions. Senior candidates should also connect props to the broader mental model of the UI as a function of state and props.

A GOOD ANSWER COVERS: Four things in order. First, define props as the single object argument that React passes to every component function. Second, show the modern destructuring pattern, such as function Avatar({ person, size }), and explain that this is equivalent to receiving a props object and reading props.person and props.size. Third, emphasize that props flow one way from parent to child and must never be mutated; a child that needs to change something must call a callback prop passed by the parent. Fourth, mention how to supply default values, either with default function parameters or by using the logical OR inside destructuring, and note that props can hold any JavaScript value including objects, arrays, and functions.

COMMON WRONG ANSWERS: Treating props as mutable local state is the biggest red flag. Another mistake is saying props are just like HTML attributes without clarifying that custom components accept arbitrary JavaScript values, not just strings. Candidates sometimes suggest two-way data binding as a built-in React feature, or they fail to mention that modifying props directly will not trigger re-renders and can introduce subtle bugs. Confusing the props object with the component's own state or context is also a signal of shallow understanding.

LIKELY FOLLOW-UPS: An interviewer might ask how you would pass data back up to a parent, which tests callback props and event lifting. They might ask what happens when you spread props, how to type props with TypeScript or PropTypes, or how default props behave when a parent explicitly passes undefined versus omitting the prop entirely. Another common pivot is asking how props differ from state and when you should lift state up versus keeping it local.

ONE CONCRETE EXAMPLE: Imagine a Profile page rendering an Avatar. The parent Profile passes a person object and a size number to Avatar. Inside Avatar, you destructure person and size from the props argument, then use them to compute an image URL and set width and height. If the user needs to update the avatar, Profile passes an onUpdate callback down to Avatar; when clicked, Avatar invokes onUpdate with new data rather than mutating its own props. This keeps the data flow explicit and debuggable.

Source: react.dev