Call a Function Inside a Child Component from Parent in React

When I build sales dashboards, I often need a parent screen to tell a child widget to do something. For example, a manager may click Refresh Activities in the dashboard header, while the activity list component needs to reload, clear filters, or scroll back to the newest item.

React normally moves data from parent to child through props. That design works well for most UI updates. But sometimes the parent needs to trigger a specific function that lives inside a child component.

This practical React tutorial shows the cleanest way to call a function inside a child component from a parent, when to use it, and when props provide a better solution.

How Parent-to-Child Function Calls Work in React

A component is a reusable piece of a React user interface. A parent component renders another component, called a child component, inside its JSX.

JSX is the HTML-like syntax that React developers use to describe what appears in the browser. For example, a dashboard parent can render an ActivityList child component.

React uses one-way data flow. A parent sends data down through props, which are read-only values passed into a component. A child sends information back by calling a callback function that the parent passed as a prop.

You can learn more about props in React before using the examples below.

When the parent must directly call a child function, modern React uses two tools:

• forwardRef lets a functional child component receive a ref from its parent.
• useImperativeHandle chooses which child functions the parent can access.

A ref is an object that React keeps between renders without causing another browser render. In this case, the ref gives the parent controlled access to selected child functions.

This pattern is useful when a parent needs to:

• Reset a child form.
• Focus a child input.
• Refresh a local client-side data view.
• Clear filters in an admin portal.
• Scroll a dashboard panel to the latest activity.
• Start or stop a child-controlled animation.

Call a Function Inside a Child Component from Parent

Let’s build a small sales activity dashboard. The parent component contains a button. When a user clicks it, the parent calls the child component’s showLatestActivities() function.

This example assumes a modern React application that uses functional components. If you need help creating one, start with this guide to setting up a ReactJS environment.

Step 1: Create the Child Component

Create a file named ActivityList.jsx. This child component displays sales activities and exposes one function to its parent.

import { forwardRef, useImperativeHandle, useState } from "react";

const ActivityList = forwardRef(function ActivityList(props, ref) {
  const [activities, setActivities] = useState([
    { id: 101, customer: "Olivia Parker", action: "Requested a product demo" },
    { id: 102, customer: "Ethan Miller", action: "Downloaded pricing details" },
    { id: 103, customer: "Sophia Davis", action: "Scheduled a follow-up call" }
  ]);

  function showLatestActivities() {
    const reversedActivities = [...activities].reverse();
    setActivities(reversedActivities);
  }

  useImperativeHandle(ref, function () {
    return {
      showLatestActivities
    };
  });

  return (
    <section>
      <h2>Sales Activities</h2>

      <ul>
        {activities.map(function (activity) {
          return (
            <li key={activity.id}>
              <strong>{activity.customer}</strong>: {activity.action}
            </li>
          );
        })}
      </ul>
    </section>
  );
});

export default ActivityList;

This code uses the useState hook to store the activity array. A hook is a React function that adds features such as state to functional components.

The showLatestActivities() function creates a copied array with [...activities] before calling reverse(). This is an immutable update, which means you create new data instead of changing existing state directly.

The useImperativeHandle hook exposes only showLatestActivities through the ref. The parent cannot access the child’s entire internal state or every function.

Sample output before clicking the parent button:

Sales Activities

Olivia Parker: Requested a product demo
Ethan Miller: Downloaded pricing details
Sophia Davis: Scheduled a follow-up call

Sample output after the parent calls showLatestActivities():

Sales Activities

Sophia Davis: Scheduled a follow-up call
Ethan Miller: Downloaded pricing details
Olivia Parker: Requested a product demo

You can see the output in the screenshot below.

Pro Tip: I’ve found that exposing only the one or two actions a parent truly needs keeps child components easier to reuse. Avoid exposing internal state management functions just because a ref makes it possible.

Step 2: Create the Parent Component

Now create App.jsx. This parent component creates a ref, passes it to ActivityList, and calls the child function through an event handler.

An event handler is a function that React runs after a browser action, such as a click, input change, or form submission. For more examples, see how to handle events in React.

import { useRef } from "react";
import ActivityList from "./ActivityList";

function App() {
  const activityListRef = useRef(null);

  function handleShowLatestClick() {
    activityListRef.current?.showLatestActivities();
  }

  return (
    <main>
      <h1>Sales Activity Dashboard</h1>

      <button onClick={handleShowLatestClick}>
        Show Latest Activities First
      </button>

      <ActivityList ref={activityListRef} />
    </main>
  );
}

export default App;

The useRef hook creates activityListRef. React places the object returned by useImperativeHandle into activityListRef.current after the child mounts.

The optional chaining operator, ?., prevents an error if a user somehow triggers the button before React mounts the child. The button calls the parent event handler, which then calls the child’s exposed function.

Sample output when the page first loads:

Sales Activity Dashboard

[Show Latest Activities First]

Sales Activities
Olivia Parker: Requested a product demo
Ethan Miller: Downloaded pricing details
Sophia Davis: Scheduled a follow-up call

Sample output after clicking “Show Latest Activities First”:

Sales Activity Dashboard

[Show Latest Activities First]

Sales Activities
Sophia Davis: Scheduled a follow-up call
Ethan Miller: Downloaded pricing details
Olivia Parker: Requested a product demo

You can see the output in the screenshot below.

Why Use a Ref for a Child Function?

A parent-to-child function call should remain an exception, not your default React pattern. In most applications, the parent owns the state and sends values down through props.

A ref works best when the child owns a focused UI behavior. For example, the child might control input focus, a local data grid selection, or a scroll position. The parent triggers that behavior without needing to know the child’s implementation details.

The approach above fits a sales activity dashboard because the child owns the activity display. It also fits local frontend tools, admin portals, and reusable UI widgets that manage their own behavior.

For a broader look at component design, see this guide on component-based architecture in React.

Use forwardRef and useImperativeHandle Together

forwardRef passes the ref from the parent into the child. Without it, a regular functional component does not receive a ref parameter.

useImperativeHandle then defines the public API that the parent can call. Think of it as a small, intentional control panel for the child component.

Here is a complete example that adds both a refresh action and a reset action.

import { forwardRef, useImperativeHandle, useState } from "react";

const TicketList = forwardRef(function TicketList(props, ref) {
  const initialTickets = [
    { id: 1, customer: "Liam Johnson", status: "Open" },
    { id: 2, customer: "Emma Wilson", status: "In Progress" },
    { id: 3, customer: "Noah Brown", status: "Resolved" }
  ];

  const [tickets, setTickets] = useState(initialTickets);

  function showNewestFirst() {
    setTickets(function (currentTickets) {
      return [...currentTickets].reverse();
    });
  }

  function resetTicketOrder() {
    setTickets(initialTickets);
  }

  useImperativeHandle(ref, function () {
    return {
      showNewestFirst,
      resetTicketOrder
    };
  });

  return (
    <section>
      <h2>Customer Support Tickets</h2>

      <ul>
        {tickets.map(function (ticket) {
          return (
            <li key={ticket.id}>
              {ticket.customer} — {ticket.status}
            </li>
          );
        })}
      </ul>
    </section>
  );
});

export default TicketList;

import { useRef } from "react";
import TicketList from "./TicketList";

function App() {
  const ticketListRef = useRef(null);

  function handleNewestFirst() {
    ticketListRef.current?.showNewestFirst();
  }

  function handleResetOrder() {
    ticketListRef.current?.resetTicketOrder();
  }

  return (
    <main>
      <h1>Customer Support Dashboard</h1>

      <button onClick={handleNewestFirst}>Show Newest First</button>
      <button onClick={handleResetOrder}>Reset Ticket Order</button>

      <TicketList ref={ticketListRef} />
    </main>
  );
}

export default App;

The child exposes two clearly named actions. The parent only decides when to call them. The child decides how to update its own state.

Sample output when the page loads:

Customer Support Dashboard

[Show Newest First] [Reset Ticket Order]

Customer Support Tickets
Liam Johnson — Open
Emma Wilson — In Progress
Noah Brown — Resolved

Sample output after clicking “Show Newest First”:

Customer Support Dashboard

Customer Support Tickets
Noah Brown — Resolved
Emma Wilson — In Progress
Liam Johnson — Open

You can see the output in the screenshot below.

When Props Are Better Than Child Functions

Use props when the parent owns the decision and the data. This often produces simpler React components because the child receives a value and renders it.

For example, a parent can store a showNewestFirst boolean in state and send it as a prop. The child calculates the display order instead of exposing an imperative function.

import { useState } from "react";

function ActivityList({ showNewestFirst }) {
  const activities = [
    { id: 201, customer: "Ava Thompson", action: "Created a new support ticket" },
    { id: 202, customer: "Mason Harris", action: "Updated account details" },
    { id: 203, customer: "Isabella Moore", action: "Closed a renewal deal" }
  ];

  const displayedActivities = showNewestFirst
    ? [...activities].reverse()
    : activities;

  return (
    <section>
      <h2>Account Activity</h2>

      <ul>
        {displayedActivities.map(function (activity) {
          return (
            <li key={activity.id}>
              {activity.customer}: {activity.action}
            </li>
          );
        })}
      </ul>
    </section>
  );
}

function App() {
  const [showNewestFirst, setShowNewestFirst] = useState(false);

  function handleToggleOrder() {
    setShowNewestFirst(function (currentValue) {
      return !currentValue;
    });
  }

  return (
    <main>
      <h1>Account Activity Dashboard</h1>

      <button onClick={handleToggleOrder}>
        Toggle Latest Activities First
      </button>

      <ActivityList showNewestFirst={showNewestFirst} />
    </main>
  );
}

export default App;

Here, the parent owns the showNewestFirst state. The child receives it through props and creates a derived display array. A derived value comes from existing state or props, so you do not need separate state for it.

This approach works especially well for filtering, sorting, tabs, conditional sections, and API-driven interfaces. You can also review React state management with hooks for more state patterns.

Sample output before clicking the button:

Account Activity Dashboard

[Toggle Latest Activities First]

Account Activity
Ava Thompson: Created a new support ticket
Mason Harris: Updated account details
Isabella Moore: Closed a renewal deal

Sample output after clicking the button:

Account Activity Dashboard

[Toggle Latest Activities First]

Account Activity
Isabella Moore: Closed a renewal deal
Mason Harris: Updated account details
Ava Thompson: Created a new support ticket

Pro Tip: I prefer props for visible UI state, such as sort direction or active filters. I reserve refs for child-