13-Apr-2025

The useRef Hook in React provides a way to access a mutable object that persists across renders, similar to how instance variables behave in class components. This mutable object doesn’t trigger re-renders when its value changes, making it ideal for scenarios where you need to interact with the DOM directly or store values that don’t affect the component’s output.

Here’s a breakdown of how useRef works and its common use cases:

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

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

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

  const handleClick = () => {
    // Access the current value of the input element
    alert(`Input value: ${inputRef.current.value}`);
  };

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

export default MyComponent;

Explanation:

1. Creating a Ref:

   • const inputRef = useRef(null); creates a mutable ref object. The initial value is set to null. This value can be of any type (e.g., an object, a number, a string).

2. Attaching to a DOM Element:

   • <input type="text" ref={inputRef} /> attaches the ref to the input element. This makes inputRef.current point to the actual DOM node of the input field.

3. Accessing the DOM Element:

   • Inside useEffect, inputRef.current gives you access to the DOM element, allowing you to call DOM methods like focus().
   • In handleClick, inputRef.current.value retrieves the current text typed in the input field.

4. Persistence Across Renders:

   • The value of inputRef.current persists across renders. Modifying inputRef.current directly doesn’t trigger a re-render. This makes it different from state, where changes trigger a re-render.

Common Use Cases:

• Managing Focus, Text Selection, or Media Playback: Control elements imperatively.
• Storing Previous Values: Keep track of a variable’s previous value without causing a re-render.
• Integrating with Third-Party Libraries: Interact with libraries that require direct DOM manipulation.
• Creating Mutable Objects for Internal Component Logic: Store values that don’t directly impact the UI.

Key Differences from State:

• No Re-renders: Modifying ref.current does not cause the component to re-render.
• Mutable: ref.current is directly mutable. You can change its properties without using a setter function like setState.

useRef offers a powerful way to manage mutable values and interact with the DOM in a way that complements React’s declarative nature. It bridges the gap for scenarios where direct manipulation is necessary without sacrificing performance by causing unnecessary re-renders.