React useInsertionEffect Hook

React.js useImperativeHandle Additional Hook

Last Updated : 08 Oct, 2024

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.

JavaScript

// 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;

JavaScript

// 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:

React useInsertionEffect Hook

rbbansal

Improve

Article Tags :

Similar Reads

ReactJS useInterval Custom Hook

JavaScript setInterval() repeatedly executes a function with a fixed time delay. It can be challenging to use the setInterval method in React. For instance, if we wish to update the delay parameter, we might have to deal with a lot of life cycle methods. To avoid this hassle, we can use a custom use

How does useImperativeHandle help parent and child components communicate?

useImperativeHandle in React allows parent and child components to communicate more effectively by enabling the child component to specify which methods and properties should be accessible to the parent through a ref. How Does It Help:Customized Interaction: Child components can define a specific se

React useInsertionEffect Hook

React useInsertionEffect Hook is used in React 18 to insert elements like dynamic styles, into the DOM before the layout effects are fired. This hook is mainly created to run on the client side, which makes it perfect for situations where the pre-layout element insertion is important. Syntax:useInse

ReactJS useTimeout Custom Hook

We often run into timeouts when building applications in React. setTimeout() executes code after a specified period only once. Usually, we don't need to worry about clearing out our timeouts when using setTimeout. However, it can be challenging to use the setTimeout method in React because we might

Additional Built-in Hooks in React

Hooks are functions that allow you to "hook" into the state of a component and provide additional features to ensure the lifespan of functional components. These are available in React versions 16.8.0Â and higher.Â however, we previously used toÂ describe them using classes. We will discuss the various

React Redux Hooks: useSelector and useDispatch.

State management is a major aspect of building React applications, allowing users to maintain and update application state predictably. With the introduction of React Hooks, managing state has become even more streamlined and efficient. Among the most commonly used hooks for state management in Reac

What is useState() in React ?

The useState() is a Hook that allows you to have state variables in functional components . so basically useState is the ability to encapsulate local state in a functional component. React has two types of components, one is class components which are ES6 classes that extend from React and the other

Why useLayoutEffect Hook is beneficial in React ?

useLayoutEffect is a React Hook that is similar to useEffect, but it fires synchronously after all DOM mutations. It's typically used for imperative DOM mutations or measurements, where you need to be sure that the DOM is updated before continuing. Here's an example of how you might use useLayoutEff

React useState Hook

The useState hook is a function that allows you to add state to a functional component. It is an alternative to the useReducer hook that is preferred when we require the basic update. useState Hooks are used to add the state variables in the components. For using the useState hook we have to import

ReactJS useReducer Hook

The useReducer hook is an alternative to the useState hook that is preferred when you have complex state logic. It is useful when the state transitions depend on previous state values or when you need to handle actions that can update the state differently.Syntaxconst [state, dispatch] = useReducer(