React useImperativeHandle Hook

In this part, we will learn about react useImperativeHandle hook. In react, Data can be passed from parent to child component using props, which is known as unidirectional data passing. In the case of props, the parent component cannot access or call a function, or value from a child component directly.

In these types of cases, we want our parent component to communicate to reach to child component to get data. We can do this using the react useImperativeHandle Hook, which allows us to get the data, state, value, or function from a child component to a parent component through ref. We can also decide which properties of the parent component can access the data.

Table of Contents

Syntax

useImperativeHandle(ref, createHandle, [dependencies])

Here, in this syntax, we can directly use useImperativeHandle without constant. We will use this hook in the child class because here ref is passed down from the parent component, createHandle is a variable or function name, or we can say data which we want to access in the parent component. dependencies is the array of dependencies that will occur to re-render.

useImperativeHandle hook is different from useRef in two ways:

It allows handling and customizing the returned value explicitly.
It allows you to replace the native instances of the ref object with the user-defined ones.

Example of React useImperativeHandle

Let’s just understand react useImperativeHandle with a simple example.

App.js

import React, { useRef} from 'react';
import Child from './Child';

function App() {
	const ref = useRef(null);
	return (
		<>
			<Child ref={ref}/>
			<button onClick={() => ref.current.increment()}>Parent Click</button>
		</>
		
    );
}

export default App;

Child.js

import React, { forwardRef, useImperativeHandle, useState} from 'react';

const Child = forwardRef((props, ref) => {
    const [count, setCount] = useState(0)
    useImperativeHandle(ref, ()=> ({
        increment
    }))

    function increment(){
        setCount(count+1)
    }
    return(
        <>
            {count}
            <button onClick = {increment}>Child Click</button>
        </>
    );
})

export default Child;

Here, we have a component with the name of Child.js, in this component we have made an application that increases the value when the button is pressed pretty easy application, isn’t it?

Now here, we have a function in which we have created a state using useState for changing value, and then we have made a button in which we will call the increment function. After that, we have to put the whole logic into forwardRef, it has two arguments props and ref.

We already know about props, also the ref will work as a data carrier. To export the function increment, we have used useImperativeHandle hook and in this we have passed our function name, So if we need to access this increment function in the parent component we can use ref.

Now in the parent component we have used useRef, if we want to access data from the child component then we need this useRef hook. After that, we called the Child component with the ref property. Then, after we have created another button in which we have passed the function from the child component using ref.current.increment().

We can now increment the value from the parent component button and also with the child component button.