useRef Hook in React

What Is useRef?

In React, useRef is a special Hook that helps you "reference" or keep track of a DOM element or a value in your functional components without causing re-renders.

But what does that mean?

Imagine you have a magic notebook where you can write down a note and always refer back to it, no matter how many times you change the pages. In this analogy, useRef is like that magic notebook. It lets you keep a persistent note (or reference) without changing how your component behaves.

Why Do We Need useRef?

Before Hooks, if you wanted to access a DOM element or maintain some mutable value without causing re-renders, you had to use class components and deal with more complex code. With useRef, you can do this in functional components easily.

The useRef Hook is useful for:

• Accessing a DOM element directly.
• Storing a value that doesn't need to trigger re-renders when updated.
• Keeping track of a previous value to compare with the current one.

In summary, useRef provides a way to interact with elements and values directly, without affecting the component's rendering.

How Does useRef Work?

Let’s walk through how the useRef Hook works, step by step. Here’s a basic example:

import React, { useRef } from 'react';

function ExampleComponent() {
// 1. Create a ref object
const inputRef = useRef(null);

const handleClick = () => {
// 2. Access the DOM element
inputRef.current.focus();
};

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

export default ExampleComponent;

Breaking It Down for Beginners

Let’s break this code into smaller pieces to understand it fully:

Import useRef

At the top of the file, we import the useRef Hook from React. You always need to import Hooks like useRef before using them in your component.

import React, { useRef } from 'react';

Create a Ref Object

Inside your functional component (ExampleComponent), you create something called a ref object. The useRef Hook helps you do this.

const inputRef = useRef(null);

This line does a few important things:

• inputRef: This is the ref object. It will be used to store a reference to the input element. The null is the initial value of the ref object.
• useRef(null): This tells React to create a ref object that starts as null. When the component renders, React will assign the ref to the DOM element you reference.

Access the DOM Element

Inside the handleClick function, we access the input element using inputRef.current. This is like using your magic notebook to get the note you wrote earlier.

const handleClick = () => {
inputRef.current.focus();
};

Calling inputRef.current.focus() focuses the input field when the button is clicked.

Attach Ref to Element

We attach the ref to the input element using the ref attribute.

<input ref={inputRef} type="text" />

By setting ref={inputRef}, React links the ref object to this input element, allowing us to access it through inputRef.current.

What Does useRef Actually Do?

Let’s examine what’s happening:

• Initial value: When the component first loads, useRef(null) creates a ref object with an initial value of null.
• Accessing elements: Once the component renders, React assigns the ref object to the DOM element. You can then useinputRef.current to interact with the element.
• Stable reference: The ref object doesn’t change between renders. It always points to the same DOM element or value.

This is how useRef helps you keep track of elements or values without causing unnecessary re-renders.

Important Things to Know About useRef

• Ref is not for re-rendering: Changing the ref value does not cause your component to re-render. It’s purely for accessing elements or storing values without affecting the UI.
• Ref object persists: The ref object persists for the full lifetime of the component. It doesn’t get reset on re-renders.
• Use with caution: Use refs only when you need to interact with the DOM directly or store a mutable value. For other state needs, prefer using useState.

More Real-Life Examples

Here are some examples of how you might use useRef in real-life scenarios:

Accessing a DOM Element

const inputRef = useRef(null);

<input ref={inputRef} type="text" />
<button onClick={() => inputRef.current.focus()}>Focus Input</button>

inputRef holds a reference to the input element, allowing you to focus it programmatically.

Storing Mutable Values

const countRef = useRef(0);

const increment = () => {
countRef.current += 1;
console.log(countRef.current);
};

countRef keeps track of a count value that can be updated without causing re-renders.