Skip to main content

Child-to-Parent Communication: Callback Pattern

Inverse data flow is React's mechanism for child-to-parent communication. While data naturally flows down from parent to child via props, inverse data flow allows child components to communicate back up by passing callback functions as props. When a child event occurs (like a click), it calls the callback, triggering parent state updates and re-renders. This pattern is fundamental to React's unidirectional architecture and enables interactive, responsive applications.

Key Takeaways​

  • React's default data flow is unidirectional: data flows down from parent to child via props
  • Inverse data flow enables upward communication by passing callback functions from parent to child as props
  • The callback pattern creates a communication loop: parent passes function → child calls it on event → parent state updates → new props flow down to child
  • Child components don't need to know what the callback does; they only know when to call it
  • This pattern enables the "lifting state up" technique and builds the foundation for interactive component hierarchies

Prerequisites​

Before we begin, ensure you have a solid grasp of the following concepts:

  • React Components and Props: Understanding how to define components and pass data through props
  • Event Handling: Familiarity with event handlers like onClick and how they trigger functions
  • JavaScript Functions: Comfort with defining functions, passing functions as arguments, and arrow functions
  • React State: Basic understanding of the useState hook and how state updates trigger re-renders

Data Flows Down, Events Flow Up​

React's architecture is built on a simple principle: data flows downward from parent to child, but events flow upward from child to parent.

By default, a parent component can easily pass information to its children through props. However, a child component cannot directly pass data back up to its parent. So how does a child tell its parent that something has happened—like a button click or form submission?

The answer is the callback function pattern. We pass a function from the parent down to the child. The child calls this function when an event occurs, and the function executes back in the parent's scope. This enables the parent to update its state and trigger a re-render, with new data flowing back down to the child.

This creates a communication loop:

  1. Parent defines a callback function and passes it to Child as a prop
  2. Child receives the function and calls it from an event handler (like onClick)
  3. The function executes in the parent's scope, updating parent state
  4. The parent re-renders, and the new state flows back down to the child via props
  5. The child receives updated props and re-renders accordingly

The Callback Pattern: Step-by-Step Implementation​

Passing a function as a prop is no different from passing any other value like a string or number. Let's walk through the process step-by-step.

Step 1: Define the Callback Function in the Parent​

Create a function in the parent component that contains the logic you want to execute when the child triggers an event. This function typically updates the parent's state:

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = useState("Hello from the Parent!");

  // This is the callback function we will pass to the child
  const updateMessage = () => {
    setMessage("Message updated by the Child!");
  };

  return (
    <div>
      <h1>Parent</h1>
      <p>{message}</p>
    </div>
  );
}

Step 2: Pass the Function as a Prop to the Child​

Pass the callback function to the child component as a prop. Use a descriptive name that indicates when it's called, such as onButtonClick, onUpdate, or onSubmit:

function ParentComponent() {
  const [message, setMessage] = useState("Hello from the Parent!");

  const updateMessage = () => {
    setMessage("Message updated by the Child!");
  };

  return (
    <div>
      <h1>Parent</h1>
      <p>{message}</p>
      <ChildComponent onButtonClick={updateMessage} />
    </div>
  );
}

Step 3: Receive and Call the Callback in the Child​

The child component receives the callback as a prop and calls it from an event handler:

function ChildComponent({ onButtonClick }) {
  return (
    <div>
      <h2>Child</h2>
      <button onClick={onButtonClick}>Update Parent's Message</button>
    </div>
  );
}

When the button is clicked, onButtonClick is called. Since onButtonClick is a reference to updateMessage, it executes in the parent's scope, updating the parent's state.

Complete Parent-Child Communication Example​

Here is a fully working example showing the callback pattern in action:

import React, { useState } from 'react';

// Child Component
function ChildComponent({ onButtonClick, childLabel }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '1rem', marginTop: '1rem' }}>
      <h2>Child Component: {childLabel}</h2>
      <p>This button will change the message in the parent.</p>
      <button onClick={onButtonClick}>Update Parent's Message</button>
    </div>
  );
}

// Parent Component
function ParentComponent() {
  const [message, setMessage] = useState("Hello! I am the parent component.");

  const handleChildClick = () => {
    setMessage("Wow, the child component just updated me!");
  };

  return (
    <div style={{ border: '1px solid #000', padding: '1rem' }}>
      <h1>Parent Component</h1>
      <p><strong>Message:</strong> {message}</p>
      <ChildComponent onButtonClick={handleChildClick} childLabel="A" />
      <ChildComponent onButtonClick={handleChildClick} childLabel="B" />
    </div>
  );
}

export default ParentComponent;

How this works:

  1. ParentComponent manages the message state using useState
  2. It defines handleChildClick function that knows how to update parent state
  3. It passes handleChildClick down to each ChildComponent as the onButtonClick prop
  4. Each ChildComponent doesn't know or care what onButtonClick does—it only knows to call it when the button is clicked
  5. When a button is clicked, handleChildClick executes in the parent, the state updates, and the parent re-renders
  6. New props flow down to children, which re-render to reflect the updated message

Passing Data from Child to Parent​

The callback pattern becomes more powerful when you pass data from the child back to the parent. The child can call the callback with arguments:

import React, { useState } from 'react';

function ChildComponent({ onTextSubmit }) {
  const [inputValue, setInputValue] = useState("");

  const handleSubmit = () => {
    // Pass the input value back to the parent
    onTextSubmit(inputValue);
    setInputValue("");
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Enter text"
      />
      <button onClick={handleSubmit}>Send to Parent</button>
    </div>
  );
}

function ParentComponent() {
  const [parentMessage, setParentMessage] = useState("");

  // Callback receives data from the child
  const handleTextFromChild = (text) => {
    setParentMessage(`Child said: ${text}`);
  };

  return (
    <div>
      <h1>Parent</h1>
      <p>{parentMessage}</p>
      <ChildComponent onTextSubmit={handleTextFromChild} />
    </div>
  );
}

export default ParentComponent;

In this example, the child passes the input value to the parent's callback function, and the parent updates its state with that data. This demonstrates how data can flow both directions: down via props, up via callback arguments.

Naming Conventions for Callbacks​

Use clear, descriptive names for callback props that indicate when they're called:

  • onSubmit — when a form is submitted
  • onClick — when a button is clicked
  • onChange — when an input value changes
  • onDelete — when a delete action occurs
  • onSelect — when an item is selected

These names follow React conventions and make code more readable and maintainable.

Frequently Asked Questions​

Can a child component call multiple callbacks or pass multiple values?​

Yes, absolutely. A child can call a callback with multiple arguments, and you can pass multiple different callbacks:

<ChildComponent
  onUpdate={handleUpdate}
  onDelete={handleDelete}
  onCancel={handleCancel}
/>

What if I need to pass data from a grandchild to a grandparent?​

You would chain callbacks: the grandparent passes a callback to the parent, the parent passes it to the child, and the child calls it when needed. However, for deeply nested components, consider using React Context or state management libraries like Redux to avoid "prop drilling."

Is the callback pattern the only way to achieve child-to-parent communication?​

No. You can also use React Context for passing data and functions through the component tree without prop drilling, or state management libraries. However, the callback pattern is the most direct and is preferred for simple parent-child relationships.

How do I know if I should lift state up vs. use callbacks?​

Lift state up to the lowest common ancestor when multiple components need to share state. Use callbacks to allow child components to trigger parent updates. They work together: callbacks trigger the lifting, and state flows back down via props.

Can I have a callback that does nothing?​

Yes, you can pass a callback that's optional and provide a default no-op function:

function ChildComponent({ onUpdate = () => {} }) {
  // If onUpdate isn't provided, it defaults to an empty function
}

Further Reading​