Passing Data Between Parent and Child in React

🔗 Passing Data Between Parent and Child Components in React

📤 From Parent to Child (via Props)

The most common and recommended way to pass data from a parent to a child is through props.

Example

function Parent() {
  const message = "Hello from Parent!";
  return <Child text={message} />;
}

function Child({ text }) {
  return <p>{text}</p>;
}

📥 From Child to Parent (via Callback Function)

To send data from a child to a parent, pass a callback function from the parent to the child. The child calls this function with the data.

Example

function Parent() {
  const handleData = (data) => {
    console.log("Received from child:", data);
  };

  return <Child sendData={handleData} />;
}

function Child({ sendData }) {
  return (
    <button onClick={() => sendData("Hi Parent!")}>
      Send to Parent
    </button>
  );
}

🔁 Two-Way Communication

Combine both props and callbacks to enable two-way communication between parent and child.

📦 Best Practices

Use props for downward data flow
Use callback functions for upward data flow
Lift state up to the common ancestor when multiple children need shared data
Use useContext or state management libraries (like Redux) for deep or global sharing

✅ Summary

React promotes a unidirectional data flow. Use props to pass data down and callbacks to send data up. For complex scenarios, consider lifting state or using context.

Data passing using React's Context

React's Context API allows you to share data across the component tree without having to pass props down manually at every level. This is especially useful for global data like themes, user information, or settings.

🧠 What Is Context?

React’s Context API allows you to create a global-like state that any component can access— without manually passing props through every level.

💡 Step-by-Step: Using useContext for State Sharing

// 1. Create the context
import React, { createContext, useState, useContext } from "react";

const ThemeContext = createContext();

// 2. Create a provider component
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. Consume context in a deeply nested child
function ThemeToggleButton() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Switch to {theme === "light" ? "dark" : "light"} mode
    </button>
  );
}

// 4. Wrap your app with the provider
function App() {
  return (
    <ThemeProvider>
      <div>
        <h1>Welcome to the App</h1>
        <ThemeToggleButton />
      </div>
    </ThemeProvider>
  );
}

export default App;

✅ Benefits of Using Context

Eliminates prop drilling
Centralizes shared state
Works well with hooks like useContext, useReducer, or useMemo for optimization

🧩 When to Use Context vs Redux

Use Case	Context API	Redux / NgRx
Small to medium app	✅ Recommended	☑️ Optional
Complex state logic	☑️ Possible	✅ Better suited
Global state (theme, auth)	✅ Ideal	✅ Also works
DevTools, time-travel debugging	❌ Not available	✅ Built-in
Async side effects	❌ Manual setup	✅ Effects / Middleware