How to Use useRef in React

React provides various hooks to work with state and side effects. One such hook is useRef, which allows us to create a mutable reference that persists across renders of a functional component. This can be useful when we need to interact with DOM elements directly or store mutable values without triggering re-renders. In this article, we will delve into the useRef hook and see how it can be utilized effectively in React applications.

Basic Usage

To start using the useRef hook, we first import it from the React library:

Copycopy code to clipboard
1import { useRef } from 'react';

We can then declare a ref variable using the useRef function:

Copycopy code to clipboard
1const myRef = useRef();

The myRef object now contains a .current property, which can be assigned any value. By default, it is set to undefined. Let's look at some examples to understand how useRef works in different scenarios.

Accessing DOM Elements

One common use case for the useRef hook is accessing and manipulating DOM elements. We can achieve this by attaching the ref object to an HTML element in the JSX code:

Copycopy code to clipboard
1function MyComponent() {
2  const inputRef = useRef();
3
4  const focusInput = () => {
5    inputRef.current.focus();
6  };
7
8  return (
9    <div>
10      <input type="text" ref={inputRef} />
11      <button onClick={focusInput}>Focus Input</button>
12    </div>
13  );
14}

In the example above, we create a ref called inputRef and attach it to the input element using the ref attribute. The focusInput function demonstrates how we can utilize the ref to programmatically focus on the input element when the button is clicked.

Storing Mutable Values

The useRef hook can also be used to store mutable values that persist across re-renders. Unlike variables declared within the component's scope, the value stored in a ref does not cause a re-render when modified. This makes it suitable for managing values that need to persist without triggering updates.

Copycopy code to clipboard
1function MyComponent() {
2  const countRef = useRef(0);
3  
4  const incrementCount = () => {
5    countRef.current += 1;
6    console.log(countRef.current);
7  };
8
9  return (
10    <div>
11      <p>Count: {countRef.current}</p>
12      <button onClick={incrementCount}>Increment</button>
13    </div>
14  );
15}

In the above example, we declare a ref called countRef and initialize it with the value 0. The incrementCount function increments the value stored in the ref and logs it to the console. Notice that modifying the ref does not trigger a re-render of the component, allowing us to persist the value across multiple updates.

Other Use Cases

Besides accessing DOM elements and storing mutable values, the useRef hook has other applications as well. It can be used to hold references to event handlers, timers, or any other value that needs to persist without causing a re-render.

To summarize, useRef is a powerful tool in React that allows us to interact with DOM elements directly and store mutable values that persist across re-renders. It provides us with a way to access and manipulate DOM nodes, manage side effects, or store values without triggering unnecessary updates.