---

🧠 1. The Core Decision Rule (Golden Rule)

Whenever you're building something, ask:

👉 “Who owns this data?”

That determines everything.

---

✅ 2. When to Send Data (Parent → Child)

✔ Use this when:

• Child just needs to display or use data

• Child does not need to modify it

---

💡 Example

function Parent() {
  const user = "Pushpesh";

  return <Child name={user} />;
}

function Child({ name }) {
  return <h1>Hello {name}</h1>;
}

---

✅ Real-life thinking

📺 Like a TV:

• Parent = Remote control

• Child = Screen

• Screen just shows what it's told

---

✅ Developer Signal

If your thought is:

"Child just needs to show or use something"

👉 ✅ Send data as props

---

⚙️ 3. When to Send Functions (Parent → Child)

✔ Use this when:

• Child needs to trigger or update parent data

• There is state in parent

---

💡 Example

function Parent() {
  const [count, setCount] = React.useState(0);

  return <Child increment={setCount} />;
}

function Child({ increment }) {
  return (
    <button onClick={() => increment(prev => prev + 1)}>
      Click Me
    </button>
  );
}

---

✅ Real-life thinking

🛎️ Like a hotel bell:

• Parent = Manager

• Child = Receptionist

• Receptionist doesn’t change hotel policy, but can:

  “Hey manager, update this!”

---

✅ Developer Signal

If your thought is:

"Child needs to change something that's not inside itself"

👉 ✅ Pass a function

---

🔥 4. When NOT to Pass Anything

✔ Keep data inside child when:

• It's local

• No other component needs it

---

💡 Example

function Child() {
  const [isOpen, setIsOpen] = React.useState(false);
}

---

✅ Developer Signal

Ask yourself:

"Does anyone else care about this data?"

• ❌ No → keep in child

• ✅ Yes → lift to parent

---

⬆️ 5. Key Pattern: “Lifting State Up”

This is a standard React pattern

---

Problem

Two children need same data:

<ChildA />
<ChildB />

👉 Where should data live?

✅ Answer: Parent

---

Pattern

function Parent() {
  const [data, setData] = React.useState("");

  return (
    <>
      <ChildA setData={setData} />
      <ChildB data={data} />
    </>
  );
}

---

✅ Real-life example

👨‍👩‍👧 Family budget:

• Parent holds money info

• Child A updates spending

• Child B displays balance

---

🔄 6. Full Flow Pattern (Most Important)

✅ Standard pattern used in real apps:

function Parent() {
  const [value, setValue] = React.useState("");

  return (
    <>
      <Input onChange={setValue} />
      <Display value={value} />
    </>
  );
}

function Input({ onChange }) {
  return (
    <input onChange={(e) => onChange(e.target.value)} />
  );
}

function Display({ value }) {
  return <p>{value}</p>;
}

---

🔥 What’s happening?

Component	Role
Parent	Owns data
Input Child	Sends updates
Display Child	Shows data

---

🧭 7. Decision Tree (Use This While Coding)

Step 1:

👉 Who owns the data?

• Parent → keep in parent

• Child only → keep in child

---

Step 2:

👉 Does child need to modify it?

• ❌ No → pass data

• ✅ Yes → pass function

---

Step 3:

👉 Do multiple components need it?

• ✅ Yes → lift state to common parent

---

⚙️ 8. Advanced Standard Patterns (Good to Know)

As you grow, you'll use:

---

✅ 1. Controlled Components (Forms)

Parent controls form data

<input value={value} onChange={handleChange} />

---

✅ 2. Callback Pattern

Child sends data upward via function

onSubmit(data)

---

✅ 3. Prop Drilling (less ideal)

Passing data through many layers

👉 Solved by Context API / Redux

---

🧩 9. Simple Mental Model (Best One)

👉 Think of React like a Google Form system:

• Parent = database

• Input field = child

• Display = child

🔁 Flow:

1. Input updates parent

2. Parent stores data

3. Parent sends updated data to display

---

✅ Final Cheat Sheet

Situation	What to Do
Child needs data	Pass data
Child needs to change parent data	Pass function
Data used in many places	Lift state up
Data only used locally	Keep in child

---

🚀 One-Line Rule (Interview Ready)

“In React, data flows top-down via props, and child components communicate with parents through callback functions passed as props.”