Lesson 2 of 80

Props & One-Way Data Flow

Q: What does 'one-way data flow' mean in React, and how does a child component ever get to change something its parent owns?

A strong answer covers: Data flows down via props — parent to child — and never automatically flows back up; A child 'changes' parent-owned state only by calling a callback function the parent passed down as a prop; Props themselves are read-only from the child's perspective.

Props are the arguments a component is called with — read-only, and flowing in exactly one direction: parent to child.

12 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 4

A child component needs to change a value its parent owns. What's the correct way to do that?

Call a callback function the parent passed down as a propDirectly mutate the prop's value inside the childUse a ref to reach up into the parent component

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Props & One-Way Data Flow

What interviewers actually ask about this, and what a strong answer has to cover.

What does 'one-way data flow' mean in React, and how does a child component ever get to change something its parent owns?

A strong answer covers

Data flows down via props — parent to child — and never automatically flows back up
A child 'changes' parent-owned state only by calling a callback function the parent passed down as a prop
Props themselves are read-only from the child's perspective

Likely follow-ups

What's prop drilling, and what do you reach for once it gets deep enough to be a real problem?
If you pass a new object literal as a prop on every render, what real consequence does that have once memoization is involved?
Could a child component directly assign to a value on its own props object? What would actually go wrong if it tried?
Strip React away entirely — if you were passing a value into a plain JavaScript function instead of a component, what's the actual vanilla-JS equivalent of a prop?

Practice these with the AI interviewer →

The plain-language idea

If a component is a function (see the last lesson), props are its arguments. A parent component calls a child component with some values; the child reads them but never changes them.

Data only flows one way: parent → child. There's no built-in mechanism for a child to reach up and change something on its parent directly.

See it in a real thing: a child that "changes" its parent

function App() {
  const [count, setCount] = useState(0);
  return <Counter value={count} onIncrement={() => setCount((c) => c + 1)} />;
}

function Counter({ value, onIncrement }) {
  return (
    <button onClick={onIncrement}>
      Count: {value}
    </button>
  );
}

Counter never touches count directly — it can't, it doesn't own it. Instead, App passes Counter a callback: a function Counter can call, which runs back in App and updates the state App actually owns. Data flows down as value; the request to change it flows back up as a function call. That's the whole trick behind every "child talks to parent" interaction in React.

Props: one-way data, parent to childStep 1 of 3

<Greeting name="Ada" /> — props are just the arguments passed into a component function.

What people usually miss

Watch out

Mutating a prop doesn't work the way you'd expect. Even where JavaScript wouldn't stop you, reassigning a prop's value inside the child doesn't change what the parent sees, and gets silently overwritten the next time the parent re-renders and passes props down again.
Prop drilling is a real cost. Passing a prop through three components that don't use it, just so a fourth one deep in the tree can, means every intermediate component has to know about data it doesn't care about. That's exactly the problem the context lesson solves.
A new object or array literal in JSX is a new reference every render. <UserCard style={{ color: "red" }} /> creates a brand-new object each time UserCard's parent re-renders — even though it looks identical. That matters a lot once memoization enters the picture.
children is just a prop. <Card><p>hi</p></Card> passes <p>hi</p> as props.children — there's no separate mechanism for nested content.

Why this matters in interviews

"How does a child component change something in its parent?" is really asking whether you understand one-way data flow at all — the honest answer ("it can't directly; it calls a function the parent handed it") is the foundation prop drilling, context, and lifting state up all build on.