Exploring the useRef Hook in React.js

Agarwal Peeyush
3 min readSep 24, 2023

--

Photo by Ferenc Almasi on Unsplash

React.js, the popular JavaScript library for building user interfaces, introduced hooks in version 16.8. These hooks provide a way to use state and other React features in functional components. Among these hooks, useRef is a versatile tool that allows you to interact with the DOM, manage references to elements, and persist values across renders. In this article, we'll delve into what the useRef hook is, its use cases, and how to effectively use it in your React applications.

Understanding useRef

useRef is a built-in hook in React that returns a mutable ref object. This ref object can be used to hold a reference to a DOM element or to persist values between renders without causing re-renders. Unlike state, changes to a ref object don't trigger a re-render of your component.

Basic Syntax

The basic syntax for using useRef is straightforward:

import React, { useRef } from 'react';

function MyComponent() {
// Create a ref object
const myRef = useRef(initialValue);

// Use the ref in your component
// ...
}
  • useRef is imported from the react library.
  • initialValue is an optional parameter that can be used to initialize the ref object with a value.

The myRef object returned by useRef has a current property that can be used to access the current value of the ref.

Use Cases for useRef:

  1. Referencing DOM Elements

One of the primary use cases for useRef is to reference and interact with DOM elements. You can use useRef to obtain a reference to a DOM element, and then you can manipulate that element directly without needing to rely on query selectors or other DOM manipulation methods.

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

function AutoFocusInput() {
const inputRef = useRef(null);

useEffect(() => {
// Focus the input element on component mount
inputRef.current.focus();
}, []);

return <input ref={inputRef} />;
}

In the example above, useRef is used to get a reference to the input element, and the focus method is called on it inside the useEffect to automatically focus the input when the component mounts.

2. Preserving Values Across Renders

Unlike state, changes to a ref object do not cause re-renders of your component. This makes useRef suitable for preserving values across renders, such as tracking previous values of props or state.

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

function PreviousValueTracker({ value }) {
const previousValueRef = useRef();

useEffect(() => {
// Update the ref with the current value on each render
previousValueRef.current = value;
});

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

In this example, useRef is used to store the previous value of the value prop, and it's updated in the useEffect without causing re-renders.

3. Managing Uncontrolled Components

useRef can be useful for managing uncontrolled components, such as form inputs, where you want to interact with the DOM directly without relying on React's controlled component pattern.

import React, { useRef } from 'react';

function UncontrolledInput() {
const inputRef = useRef(null);

const handleButtonClick = () => {
// Access the input value directly using ref
alert(`Input Value: ${inputRef.current.value}`);
};

return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleButtonClick}>Get Value</button>
</div>
);
}

In this example, the input element is uncontrolled, but you can access its value directly using the inputRef.

Conclusion

The useRef hook in React.js is a powerful tool that provides a way to interact with the DOM, manage references to elements, and persist values across renders without causing re-renders. Whether you need to focus a DOM element, track previous values, or manage uncontrolled components, useRef offers a flexible and efficient solution. When used appropriately, it can enhance the capabilities of your React components and simplify complex tasks related to DOM manipulation and state management.

Incorporating useRef into your React applications can open up new possibilities for handling DOM interactions and state persistence, making your components more versatile and efficient.

Happy Learning! Feel free to connect with me on LinkedIn!

--

--

No responses yet