In React, data usually flows from parent to child using props.
But in real applications, child components also need to communicate back to their parents — for example when a button is clicked, form data changes, or an item is selected.

In interviews, this is commonly explained as:

“Child components communicate with parent components by calling callback functions passed through props.”

Basic Concept

The parent passes a function to the child as a prop.

The child executes that function whenever it wants to send data/events back to the parent.

Example

Parent Component

function Parent() {

  const handleMessage = (data) => {
    console.log("Message from child:", data);
  };

  return (
    <Child sendData={handleMessage} />
  );
}

---

Child Component

function Child(props) {

  return (
    <button onClick={() => props.sendData("Hello Parent")}>
      Send Message
    </button>
  );
}

Flow Explanation

1. Parent creates a function (handleMessage)

2. Parent passes it to child via props

3. Child calls that function

4. Data moves back to parent

So communication is still technically top-down, because the parent owns the function.

Interview-Friendly Definition

“In React, child-to-parent communication is achieved using callback functions. The parent passes a function as a prop to the child, and the child invokes that function to send data or notify events back to the parent.”

Real-Time Examples

1. Form Input

Child component sends entered text to parent.

<input onChange={(e) => props.onChange(e.target.value)} />

2. Button Click Events

<button onClick={props.onDelete}>
  Delete
</button>

3. Shopping Cart

A product card child component informs parent:

props.addToCart(product)

Other Communication Methods in React

1. Callback Functions (Most Common)

Best for:

• Parent ↔ Child communication

• Simple component hierarchy

2. Context API

Used when many nested components need shared data.

Example:

• Theme

• Logged-in user

• Language settings

React Context API

3. State Management Libraries

For large applications:

• Redux

• Zustand

• MobX

Important Interview Points

Props are Read-Only

A child cannot directly modify parent state.

Wrong approach:

props.count = 10

Correct approach:

props.updateCount(10)

Common Interview Question

Q: Why does React prefer callback-based communication?

Because React follows:

• Unidirectional data flow

• Predictable state management

• Easier debugging

Functional Component Example with useState

import React, { useState } from "react";

function Parent() {

  const [message, setMessage] = useState("");

  return (
    <>
      <h1>{message}</h1>

      <Child updateMessage={setMessage} />
    </>
  );
}

function Child({ updateMessage }) {

  return (
    <button onClick={() => updateMessage("Hello Parent")}>
      Click
    </button>
  );
}

---

Advanced Interview Point

Sometimes interviewers ask:

“Can siblings communicate directly?”

Answer:

“No. Usually sibling communication happens through the parent. The shared parent stores the state and passes data/functions to both children.”

This is called:

Lifting State Up

React

Short Interview Answer

“In React, child components communicate with parent components using callback functions passed through props. The parent defines a function and passes it to the child. The child invokes that function to send data or trigger events. This maintains React’s unidirectional data flow and predictable state management.”