How useRef Hook is useful in React ?

Hooks provides a way to useState and other React features in functional components without the need for class components. We can either use built-in hooks or customize and make our own. One of those hooks in useRef. It allows reference to a value that does not require rendering. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.

Primary Uses of useRef:

1. Accessing DOM elements

Referring to DOM elements directly within your component is a common use case for useRef. Instead of employing DOM queries like document.getElementById, useRef allows direct referencing of elements.

import React, { useRef } from 'react';

const CustomComponent = () => {
	const inputRef = useRef(null);

	const handleClick = () => {
		// Focus the input element on button click
		inputRef.current.focus();
	};

	return (
		<div>
			<input ref={inputRef} type="text" />
			<button
				onClick={handleClick}>
				Focus Input
			</button>
		</div>
	);
};

2. Storing previous values

Utilizing useRef enables the storage of a value that persists across renders without triggering re-rendering when updated. This proves beneficial for maintaining previous values without causing unnecessary renders.

import React, {
	useEffect,
	useRef
} from 'react';

const CustomValueComponent = ({ value }) => {
	const prevValueRef = useRef();

	useEffect(() => {
		prevValueRef.current = value;
	}, [value]);

	return (
		<div>
			<p>Current Value: {value}</p>
			<p>Previous Value: {prevValueRef.current}</p>
		</div>
	);
};

3. Navigating External Libraries

In certain scenarios, when incorporating external libraries that require a mutable reference to data, useRef can prove to be quite useful. Keep in mind that as useRef doesn't induce re-renders, if you require component updates to be reflected in the UI, useState should be preferred. Reserve the use of useRef for managing mutable values or references without influencing component rendering.

import React, {
	useEffect,
	useRef
} from 'react';
import externalLibrary from 'some-external-library';

const CustomLibraryComponent = () => {
	const dataRef = useRef([]);

	useEffect(() => {
		// Update the external library with the latest data
		externalLibrary.updateData(dataRef.current);
	}, []);

	//...
};

useImperativeHandle:

Combining useRef, useImperativeHandle, and forwardRef enables the creation of custom input components with programmatically focused input methods. This approach offers a controlled and explicit means of interacting with a child component's methods or properties from its parent.

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

const ModifiedInputComponent = forwardRef((props, ref) => {
	const inputRef = useRef(null);

	// Expose the 'focusInput' method to the parent component
	useImperativeHandle(ref, () => ({
		focusInput: () => {
			inputRef.current.focus();
		}
	}));

	return (
		<input
			ref={inputRef}
			type="text"
			placeholder={props.placeholder}
		/>
	);
});

export default ModifiedInputComponent;

Creating a reference to the input element in the child component is achieved using useRef. Subsequently, by utilizing useImperativeHandle, we expose a method named focusInput to the parent component via the ref. This mechanism empowers the parent component to invoke focusInput on the child component's ref, facilitating programmatic focusing of the input element.

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

const ModifiedParentComponent = () => {
	const inputRef = useRef(null);

	const handleFocusButtonClick = () => {
		/* 
		Call the 'focusInput' method of 
		the child component
		*/
		if (inputRef.current) {
			inputRef.current.focusInput();
		}
	};

	return (
		<div>
			{/* Child component with the ref */}
			<ModifiedInputComponent ref={inputRef}
				placeholder="Enter your name" />
			<button onClick={handleFocusButtonClick}>
				Focus Input
			</button>
		</div>
	);
};

export default ModifiedParentComponent;

Utilizing useRef in the parent component establishes a reference (inputRef) aimed at interacting with the focusInput method of the child component. Upon clicking the "Focus Input" button, the handleFocusButtonClick function executes. Within this function, the focusInput method is invoked on the child component's ref, consequently focusing the input element.

This example showcases the collaborative use of useRef and useImperativeHandle to construct a more regulated interface for parent components to interact with child components.

Steps to Create a React App:

Step 1: Create a React application using the following command.

npm create-react-app my-app

Step 2: Naviage to the root directory of your folder using the following commad.

cd my-app

Example: Below is an example to show a scnerario where useRef is useful.

import { useRef } from 'react';
export default function Counter() {
	let ref = useRef(0);

	function handleClick() {
		ref.current = ref.current + 1;
		alert('You clicked' +
			ref.current + 'times');
	}

	return (
		<button onClick={handleClick}>
			Click me!
		</button>
	);
}

Start your application using the following command.

npm start

Ouput:

Conclusion:

Referring to DOM elements directly within React components is a common need, but traditional methods like document.getElementById() can be inefficient in a React context. useRef offers a more efficient way to reference DOM elements, manage mutable values, and interact with child components imperatively. Its ability to persist values across renders without triggering re-renders is particularly useful for scenarios like managing DOM focus efficiently. Thus, useRef serves as a valuable tool for optimizing performance and state management in React applications.