React’s Data Flow

January 23, 2026

React Data Flow

How props, hooks, and context actually work together 🍕

Think of Pizza React Data Flow Explained with Pizza 🍕

Think of a React app like a pizza kitchen.

The parent component owns the pizza
Props deliver the pizza to children
Children never change the pizza directly
They can only ask for changes

That’s React data flow in one sentence.

🍕 The Parent Owns the Pizza (State)

1function PizzaShop() {
2  const [pizza, setPizza] = React.useState("Margherita");
3
4  function changePizza(newPizza) {
5    setPizza(newPizza);
6  }
7
8  return (
9    <div>
10      <h1>Today's Pizza: {pizza}</h1>
11      <PizzaMenu
12        pizza={pizza}
13        onChangePizza={changePizza}
14      />
15    </div>
16  );
17}
18
19

Mental model:

PizzaShop owns the state

It decides what pizza exists

Data flows down via props

🧑‍🍳 Child Receives Pizza via Props

1
2function PizzaMenu({ pizza, onChangePizza }) {
3  return (
4    <div>
5      <p>Current choice: {pizza}</p>
6      <button onClick={() => onChangePizza("Pepperoni")}>
7        Switch to Pepperoni
8      </button>
9    </div>
10  );
11}
12
13
14

What to remenber:

❌ Children do not mutate props

✅ Children request changes using callbacks

🔄 One-Way Data Flow The Rule

React always follows this direction:

1
2State (PizzaShop)
3   ↓
4Props (PizzaMenu)
5   ↓
6User Event
7   ↑
8State Update
9
10

Breaking this rule is how bugs are born.

🍕 What About Context?

Context is pizza delivery without passing boxes through every room.

1const PizzaContext = React.createContext();
2
3function PizzaProvider({ children }) {
4  const [pizza, setPizza] = React.useState("Margherita");
5
6  return (
7    <PizzaContext.Provider value={{ pizza, setPizza }}>
8      {children}
9    </PizzaContext.Provider>
10  );
11}
12
13
14

1function PizzaConsumer() {
2  const { pizza, setPizza } = React.useContext(PizzaContext);
3
4  return (
5    <button onClick={() => setPizza("Hawaiian")}>
6      Change to Hawaiian
7    </button>
8  );
9}
10
11
12

Important to remeber:

Context does not change data flow. It only removes prop drilling

🍕 State owns the pizza

📦 Props deliver the pizza

🔄 Events request changes

🧠 Context skips plumbing, not rules

Once this clicks, React stops feeling magical and starts feeling predictable.