Explain props in React and how parent components pass data to children
Your grasp of props as the read-only, one-way parent-to-child interface.
Define props as the single object argument; show destructuring; stress immutability and downward flow; note defaults.
What's really being asked
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.
The full answer
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.
The mistakes people make
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.
What usually comes next
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.
A 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.
Interview question
A child component needs to change a value it received from its parent. What is the correct React pattern?
- a.Declare a local state variable with the same name to override the prop
- b.Mutate the prop directly inside the child component
- c.Call a callback function passed down from the parent via propsCorrect
- d.Use React's built-in two-way binding to sync the value automatically
Why? this is the answer
Props are immutable and flow one-way from parent to child, so the child must invoke a callback prop to request that the parent update the data. Mutating a prop directly breaks React's rendering assumptions and will not trigger a re-render.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles