React.js useImperativeHandle Additional Hook

The useImperativeHandle hook in react is used to modify the instance of child component while using refs. It is an additional hook that works with refs and allows us to customize the instance values of Child Components without directly using DOM.

Syntax:

useImperativeHandle(ref, createHandle, [deps])

Parameters:

• ref: The ref passed from the parent component.
• createHandle: A function returning an object that exposes specific methods or properties.
• deps: Optional dependency array to create custom handles.

Returns:

It gives access to customize the instances.

The useImperativeHandle hook works in the similar phase of useRef hook but only it allows us to modify the instance that is going to be passed with the ref object which provides a reference to any DOM element. Although this hook is used in rare cases, it has some most advanced functionality.

Let's understand it with an example, but first, create a new react application.

Example: This example demonstrates how to use useImperativeHandle to expose the focus method from a child to its parent allowing the parent to focus the input field.

// Filename - App.js

import React, { useRef } from "react";
import Input from "./Input";

const App = () => {
	const inputRef = useRef(null);
	return (
		<div>
			<Input onFocus={() => inputRef.current.focus()} ref={inputRef} />
		</div>
	);
};

export default App;

// Filename - Input.js

import React, { useRef, useImperativeHandle, forwardRef } from "react";

function Input(props, ref) {
	const btn = useRef();
	useImperativeHandle(ref, () => ({
		focus: () => {
			console.log("Input is in focus");
		}
	}));
	return <input ref={btn} {...props} placeholder="type here" />;
}

export default forwardRef(Input);

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: