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, 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 react useImperativeHandle Hook, which allows us to get the data, state, value or function from a child component to parent component through ref. We can also decide which properties of the parent component can access the data.

Syntax

useImperativeHandle(ref, createHandle, [dependencies])

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

useImperativeHandle hook is different from useRef in majorly 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 which increases the value when button pressed pretty easy application isn’t it?

Now in here, we have a function in which we have created state using useState for changing value, 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 ref will work as 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 parent component we have used useRef, if we want to access data from child component then we need this useRef hook. After that, we have called Child component with ref property. Then, after we have created the another button in which we have passed the function from child component using ref.current.increment().

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