React Hooks: useRef

Introduction

The useRef Hook is a powerful feature in React that allows you to access and persist values without causing re-renders. It is commonly used to interact directly with DOM elements and to store mutable values that do not affect the UI.

Understanding useRef is important for building efficient React applications and is frequently discussed in interviews.

This article explains what useRef is, how it works, common use cases, examples, best practices, and interview questions, making it suitable for beginners and professionals.

What Is useRef?

useRef is a React Hook that returns a mutable object with a single property called current.

const ref = useRef(initialValue);

The value of ref.current persists across renders and updating it does not trigger a re-render.

How useRef Works

• useRef creates an object that remains the same between renders
• Updating ref.current does not cause the component to re-render
• The reference is preserved for the lifetime of the component

Accessing DOM Elements Using useRef

One of the most common use cases of useRef is accessing DOM elements directly.

Example: Focusing an Input Field

import { useRef } from "react";

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

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

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

export default InputFocus;

Here, useRef gives direct access to the input element.

Storing Mutable Values Without Re-render

useRef can store values that need to persist but should not trigger UI updates.

Example: Tracking Render Count

import { useRef, useEffect } from "react";

function RenderCounter() {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current += 1;
  });

  return <p>Rendered {renderCount.current} times</p>;
}

State is not suitable here because updating state would cause infinite renders.

useRef vs useState

Preserving Previous Values Using useRef

import { useRef, useEffect, useState } from "react";

function PreviousValue() {
  const [count, setCount] = useState(0);
  const prevCount = useRef(null);

  useEffect(() => {
    prevCount.current = count;
  }, [count]);

  return (
    <p>
      Current: {count}, Previous: {prevCount.current}
    </p>
  );
}

This pattern is useful for comparison logic.

Common Mistakes with useRef

• Expecting useRef updates to re-render the component
• Using useRef instead of state for UI updates
• Accessing ref.current before it is assigned
• Overusing useRef unnecessarily

Best Practices

• Use useRef for DOM access and non-UI data
• Use state for data that affects rendering
• Avoid modifying refs during render
• Keep refs simple and focused

Interview Questions and Answers

What is useRef used for?

useRef is used to persist mutable values and access DOM elements without triggering re-renders.

Does updating useRef cause re-render?

No, updating ref.current does not cause a component to re-render.

When should you use useRef instead of useState?

When you need to store values that do not affect the UI and should persist across renders.

Can useRef be used to access DOM elements?

Yes, accessing DOM elements is one of the primary use cases of useRef.