The useRef hook in React is used to persist values across renders without causing a re-render. It can store a reference to a DOM element, a value, or even a function that doesn’t change between renders. It’s useful for accessing or modifying a DOM element directly or for keeping track of values that should not trigger a re-render when they change.

Syntax:

• initialValue: The initial value you want to store in the useRef object (optional). For DOM elements, it’s usually null, and for general values, it can be any value like 0, an empty string, or an object.

• myRef.current: The current property of the object returned by useRef will store the actual value you’re referring to.

Key Uses of useRef:

1. Accessing DOM Elements: You can use useRef to reference and interact with a DOM element directly without needing to use document.querySelector() or other DOM methods.
2. Storing Mutable Values: You can store values that need to persist across renders but shouldn’t cause re-renders when updated (e.g., keeping track of previous state values or timers).
3. Holding References to Functions: You can store a function in useRef that doesn’t change between renders and can be accessed later.

Example 1: Accessing DOM Elements with useRef

In this example, we’ll focus on using useRef to access a DOM element (like an input field) directly and manipulate it.

import React, { useRef } from 'react';

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

const handleFocus = () => {
// Accessing the input element and focusing it
inputRef.current.focus();
};

return (
<div>
<input ref={inputRef} type="text" placeholder="Click the button to focus" />
<button onClick={handleFocus}>Focus the input</button>
</div>
);
}

export default FocusInput;

Explanation:

• inputRef is initialized using useRef(null) because it’s going to store a reference to the DOM element (the input field).
• We pass the inputRef to the ref attribute of the <input> element.
• When the “Focus the input” button is clicked, the handleFocus function accesses inputRef.current (the DOM element) and calls focus() on it, causing the input field to gain focus.

Example 2: Storing Mutable Values Without Causing Re-Renders

Here’s how you can use useRef to persist a value without triggering a re-render:

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

function Timer() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();

useEffect(() => {
prevCountRef.current = count; // Store the previous count value in ref
}, [count]);

return (
<div>
<p>Current Count: {count}</p>
<p>Previous Count: {prevCountRef.current}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

export default Timer;

Explanation:

• prevCountRef stores the previous count value using useRef().
• In the useEffect, we update prevCountRef.current to the current count whenever it changes.
• Unlike state, updating prevCountRef.current doesn’t trigger a re-render, so the UI will still reflect the latest count but will show the previous value from the useRef object.

Key Points About useRef:

• Doesn’t trigger re-renders: Updating the .current property of a ref does not cause the component to re-render. This is why it’s useful for storing mutable values that do not need to affect the UI directly.

• DOM references: When you pass a ref to a DOM element, useRef will hold a reference to that element, allowing you to directly interact with the DOM.

• Persisted values: You can store values (like timers, previous states, etc.) in useRef that persist across renders but don’t cause re-renders when updated.

Example 3: Storing a Timer ID

Here’s an example where useRef is used to store a timer ID so that you can clear it when needed:

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

function TimerWithRef() {
const [seconds, setSeconds] = useState(0);
const timerRef = useRef(null);

useEffect(() => {
// Set up a timer when the component mounts
timerRef.current = setInterval(() => {
setSeconds(prev => prev + 1);
}, 1000);

// Clean up the timer when the component unmounts
return () => clearInterval(timerRef.current);
}, []);

return (
<div>
<p>Time: {seconds} seconds</p>
</div>
);
}

export default TimerWithRef;

Explanation:

• timerRef stores the ID of the timer returned by setInterval.
• We use useEffect to start the timer when the component mounts and clean it up when the component unmounts (to avoid memory leaks).
• The timer itself does not trigger re-renders of the component since we are using setState only to update the seconds value.

Conclusion:

The useRef hook is a versatile tool in React for managing references to DOM elements, storing mutable values across renders, and preventing unnecessary re-renders. It is essential for cases where you need to directly manipulate the DOM, store previous values, or hold on to values that don’t need to trigger a UI update when changed.