One-Way Data Flow

State flows like a waterfall: strictly top-down. Siblings cannot talk directly.

React3 min readConcept 5 of 46

What it is

In React, data flows in exactly one direction: down the tree from parent to child via **props**. This is known as One-Way Data Flow.

A child component cannot pass data upwards to its parent, nor can it pass data sideways to a sibling component. If a component is given data via props, it cannot mutate that data; props are strictly read-only.

Why it matters

This strict flow makes your application predictable and easy to debug. If a piece of UI is rendering incorrect data, you know exactly where to look: you trace the props up the tree until you find the component that owns the state.

In frameworks with two-way data binding, tracking down what mutated a variable can be a nightmare because any component can change any data.

Lifting State Up

If two sibling components (e.g., an Input and a Display) need to share the same data, you cannot pass data directly between them.

Instead, you must **Lift State Up** to their closest common ancestor. The parent component holds the state and passes it down to both siblings via props. If a child needs to update the state, the parent passes down an update function as a prop.

Lifting State Up

Observe how data flows. Siblings cannot communicate directly. To share data, the state must be lifted to their common ancestor and passed down.

// 1. State lives in the common ancestor
function Parent() {
const [message, setMessage] = useState("Hello");
 
return (
<div className="flex">
{/* 2. Data flows DOWN via props */}
<ChildA data={message} />
<ChildB data={message} />
</div>
);
}
 
// 3. Siblings receive data, but cannot pass it between each other
function ChildA({ data }) {
return <p>{data}</p>;
}

Parent

"Hello"

Owns the state

Child A

props.data

Child B

props.data

Child A ❌ Cannot pass data directly to ❌ Child B

Data flows strictly downwards. If Child A and Child B need the same data, it must be lifted to Parent.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which direction does data flow in a React application?
  2. 2How do two sibling components share state?
  3. 3Can a child component modify the props it receives from its parent?

Remember this

  • Data flows strictly top-down via props.
  • Props are read-only and cannot be mutated by children.
  • To share state between siblings, Lift State Up to their closest common ancestor.

Done with this concept?

Mark it complete to track your progress. No login needed.