Connecting the React World: Component Communication

A React application is a tree of components. For an application to be useful, these components must be able to "talk" to each other. This communication—the flow of data—is the most critical concept to master after learning what a component is. Data in React primarily flows in one direction: **down**, from parent to child.

1. The Primary Highway: Props (Parent-to-Child)

The most common and straightforward way to pass data is from a parent component to a child component using **props** (short for "properties"). Props are a read-only object of data passed to the child.

The parent passes data as attributes on the child component, just like HTML attributes. The child receives this data in an object called `props`.

// Parent Component
function App() {
  return <UserProfile username="Ada" age={28} />;
}

// Child Component
function UserProfile(props) {
  // props is { username: "Ada", age: 28 }
  return (
    <p>User: {props.username}, Age: {props.age}</p>
  );
}

A modern and cleaner way to use props is by **destructuring** them in the child's function signature:

// Child Component (Destructured)
function UserProfile({ username, age }) {
  return (
    <p>User: {username}, Age: {age}</p>
  );
}

You can pass any JavaScript value as a prop: strings, numbers, booleans, arrays, objects, and even functions. A special prop is props.children, which contains whatever content is nested *inside* the component's tags.

2. The Return Trip: Callbacks (Child-to-Parent)

Since data only flows down, how does a child send information back up? It can't. Instead, the parent passes a **function** down as a prop. The child can then *call* this function, passing data as an argument.

This is known as the **callback pattern**. The parent "hands the child a phone" (the function) and says, "Call me on this if anything happens."

// Parent Component
function SearchPage() {
  const [searchTerm, setSearchTerm] = useState('');

  // 1. Parent defines the function
  const handleSearch = (term) => {
    setSearchTerm(term);
  }

  return (
    <div>
      {/* 2. Parent passes the function as a prop */}
      <SearchBar onSearch={handleSearch} />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

// Child Component
function SearchBar({ onSearch }) {
  const [input, setInput] = useState('');

  const handleChange = (e) => {
    setInput(e.target.value);
    // 3. Child calls the function from props
    onSearch(e.target.value);
  }

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

3. Sibling Rivalry: Lifting State Up

What if two sibling components need to share or react to the same state? They can't talk to each other directly. The solution is to **lift state up**.

You find their closest common ancestor (parent) and move the shared state into that parent. The parent then becomes the "single source of truth" and passes the state *down* to both siblings as props.

4. The Global Broadcast: The Context API

Sometimes, you have data that many components need, at different nesting levels (e.g., user authentication, theme). Passing this data through every single intermediate component is called **"prop drilling"** and it's tedious and makes code hard to maintain.

The **Context API** is React's built-in solution. It allows a parent component to make data available to any component in its tree below it, without passing props manually.

1. Create Context: const MyContext = React.createContext();
2. Provide Value: Wrap your component tree with <MyContext.Provider value={...}>
3. Consume Value: Any child component can use the useContext(MyContext) hook to read the value.

Key Takeaway: Start with props and callbacks. When you find siblings needing the same data, lift state up. If you find yourself "prop drilling," reach for the Context API.