React Hooks-Calling Child Component Function From Parent Component

In this article we’re are assuming that you are somewhat familiar with React Hooks

For calling Child Component function from parent component in hooks we are using React.forwardRef and React.useImperativeHandle hooks from React. Now let us know briefly about these two. What are they? How are they used? And the most important question, how are we going to use them? So let’s get started!

React.forwardRef

React.forwardRef creates a React component that forwards the ref attribute, which it receives, to another component below in the tree. So, in simple words forwardRef creates such a component which receives a ref attribute from its parent component and forwards it to the components down in the hierarchy.

Arguments and return type: React calls this function with two arguments one is props and the other is ref. This returns a react node something like this.

const someComponent = React.forwardRef((props,ref)=>(
    <div ref={ref} className="title">
        {props.title}
    </div>
))

UseRef hook

React.useImperativeHandle

When we use useRef then instance value of component is generated with which ref is used, that instance value can be used to manipulate the DOM element, now React.useImperativeHandle customizes the instance value that is exposed to parent components. It is used with forward ref otherwise it will throw an error Cannot add property current, object is not extensible.

useImperativeHandle(ref,
    () => {
        focus: () => {// function name
            // the above func. is customized function as it can 
            // behave differently than its normal behavior 
         } 
    });

Demo: Calling child function from parent in React Hooks

So let us create a parent component first
So we have created a component with a button to call the child function later on.

import React from 'react'
export default function ParentFunction() {
    return (
        <div className="container">
          <div>
            Parent Component
          </div>  
          <button onClick={()=>{ }}>
            Call Function
          </button>
        </div>
    )
}

Output till now

Now, lets create a child component using forwardRef .
A child component is ready along with a function in which it alerts a message “Child function called”, this function is named as showAlert with no arguments, using useImperativeHandle as we have discussed above about the useImperativeHandle and the forwardRef hooks in React.

import React, { forwardRef, useImperativeHandle } from 'react'
export default function ParentFunction() {
    return (
        <div className="container">
            <div>
                Parent Component
            </div>
            <button onClick={() => { }}>
                Call Function
            </button>
        </div>
     )
}
const Child = forwardRef((props, ref) => {
    useImperativeHandle(
        ref,
        () => ({
            showAlert() {
                alert("Child function called")
            }
         }),
     )
     return (
         <div>Child Component</div>
     )
})

Our output is still the same because the child component is not rendered yet.

Here comes the important part to call the child function.
Now we will just render the child component in the parent and create a ref using React.useRef with that the showAlert() function will be called.

import React, { forwardRef, useRef, useImperativeHandle } from 'react';
export default function ParentFunction() {
    const childRef = useRef();
    return (
        <div className="container">
            <div>
                Parent Component
            </div>
            <button
                onClick={() => { childRef.current.showAlert() }}
            >
            Call Function
            </button>
            <Child ref={childRef}/>
        </div>
    )
}
const Child = forwardRef((props, ref) => {
    useImperativeHandle(
        ref,
        () => ({
            showAlert() {
                alert("Child Function Called")
            }
        }),
    )
    return (
       <div>Child Component</div>
    )
})

Child component is rendered and a ref is created using React.useRef named childRef. The button we created in parent component is now used to call the child component function childRef.current.showAlert();

OUTPUT

Conclusion

As we know useRef() returns a mutable ref object whose .current property is initialized to the passed argument. The returned object will persist for the full lifetime of the component. Now, the function showAlert() is initialized in .current property of ref, which can be used anywhere in the component.

Reference

React - A JavaScript library for building user interfaces

https://stackoverflow.com/