How to call a React Child Function (2024)

If you want to call a function of a child component from a parent component in React, you can use the useImperativeHandle hook.

Let’s say we have a simple Listing component that renders a random todo item from the JSONPlaceholder API.

import { View, Text, StyleSheet } from 'react-native';import React, { useEffect, useState } from 'react';type Listing = {userId: number;id: number;title: string;completed: boolean;};const Listing = () => {const [data, setData] = useState<Listing>();const loadData = async () => {const id = Math.floor(Math.random() * 200) + 1;const data = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);const json = await data.json();setData(json);};useEffect(() => {loadData();}, []);return (<View style={styles.container}>{data ? (<Text style={{ fontSize: 20, color: '#fff' }}>{data.title}</Text>) : (<Text style={{ fontSize: 20, color: '#fff' }}>Loading...</Text>)}</View>);};const styles = StyleSheet.create({container: {backgroundColor: '#101353',alignItems: 'center',padding: 20,margin: 20}});export default Listing;

To use it, we need to wrap our component in a forwardRef call and pass the ref to the useImperativeHandle hook.

import { View, Text, StyleSheet } from 'react-native';import React, { useEffect, useState } from 'react';import { forwardRef, useImperativeHandle } from 'react';type Listing = {userId: number;id: number;title: string;completed: boolean;};interface Props {}// Define the ref typeexport type ListingRef = {refresh: () => void;};// Wrap the component in a forwardRef callconst ListingGood = forwardRef<ListingRef, Props>((props, ref) => {const [data, setData] = useState<Listing>();const fetchData = async () => {...};// Pass the ref to the useImperativeHandle hookuseImperativeHandle(ref, () => ({refresh: () => {fetchData();}}));return (...);});const styles = StyleSheet.create({container: {backgroundColor: '#ff00ff',alignItems: 'center',padding: 20}});export default ListingGood;

Within the useImperativeHandle hook we can then define the functions that we want to expose to the parent component.

Now our parent component only needs to create a ref and pass it to the child component:

import { View, Button } from 'react-native';import React, { useRef, useState } from 'react';import ListingGood, { ListingRef } from '../components/ListingGood';const Page = () => {// Create the refconst ref = useRef<ListingRef>(null);// Use the refconst updateMyChild = () => {ref.current?.refresh();};return (<View><Button onPress={updateMyChild} title="Update child component" />{/* Add the ref */}<ListingGood ref={ref} /></View>);};export default Page;

Check out the useImperativeHandle docs for more information as well!