React useRef Hook

🎯 React `useRef` Hook

The useRef Hook is used to store a mutable value that does NOT cause re-renders when updated.
It can also be used to access DOM elements directly, similar to document.getElementById() in JavaScript.

🧠 What Does `useRef` Do?

✔ Stores a value
✔ Persists between renders
✔ Does NOT trigger re-render when changed
✔ Can reference DOM elements

📌 Basic Syntax

🧪 Example 1: Access DOM Element

import { useRef } from "react";

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

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

return (
<div>
<input ref={inputRef} placeholder="Click button to focus" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
}

export default InputFocus;

import { useRef } from "react";

function InputFocus() {

const inputRef = useRef(null);

const focusInput = () => {

inputRef.current.focus();

};

return (

<div>

<button onClick={focusInput}>Focus Input</button>

</div>

);

}

export default InputFocus;

📍 inputRef.current gives access to the HTML <input> element.

🧪 Example 2: Store Values Without Re-render

import { useRef, useState } from "react";

function Counter() {
const [count, setCount] = useState(0);
const renderCount = useRef(1);

return (
<div>
<p>Count: {count}</p>
<p>Component Rendered: {renderCount.current} times</p>

<button
onClick={() => {
setCount(count + 1);
renderCount.current++;
}}
>
Increase
</button>
</div>
);
}

export default Counter;

import { useRef, useState } from "react";

function Counter() {

const [count, setCount] = useState(0);

const renderCount = useRef(1);

return (

<div>

<p>Count: {count}</p>

<p>Component Rendered: {renderCount.current} times</p>

<button

onClick={() => {

setCount(count + 1);

renderCount.current++;

}}

Increase

</button>

</div>

);

}

export default Counter;

📌 Updating the ref does not re-render the component.

🧪 Example 3: Saving Previous State

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

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

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

return (
<>
<h2>Current Count: {count}</h2>
<h3>Previous Count: {prevCount.current}</h3>
<button onClick={() => setCount(count + 1)}>Increment</button>
</>
);
}

export default PreviousValue;

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

function PreviousValue() {

const [count, setCount] = useState(0);

const prevCount = useRef();

useEffect(() => {

prevCount.current = count;

}, [count]);

return (

<h2>Current Count: {count}</h2>

<h3>Previous Count: {prevCount.current}</h3>

<button onClick={() => setCount(count + 1)}>Increment</button>

</>

);

}

export default PreviousValue;

📌 Useful for comparing previous and current state values.

🧪 Example 4: Timer with `useRef`

import { useRef, useState } from "react";

function Timer() {
const [time, setTime] = useState(0);
const timerRef = useRef(null);

const start = () => {
timerRef.current = setInterval(() => setTime(t => t + 1), 1000);
};

const stop = () => {
clearInterval(timerRef.current);
};

return (
<div>
<h2>Time: {time}s</h2>
<button onClick={start}>Start</button>
<button onClick={stop}>Stop</button>
</div>
);
}

export default Timer;

import { useRef, useState } from "react";

function Timer() {

const [time, setTime] = useState(0);

const timerRef = useRef(null);

const start = () => {

timerRef.current = setInterval(() => setTime(t => t + 1), 1000);

};

const stop = () => {

clearInterval(timerRef.current);

};

return (

<div>

<button onClick={start}>Start</button>

</div>

);

}

export default Timer;

✔ Prevents re-render loops
✔ Best for timers and intervals

🧠 When to Use `useRef`

Situation	useRef Recommended?
Accessing DOM elements	✅ Yes
Storing previous values	✅ Yes
Handling timers or intervals	✅ Yes
Avoiding re-render on data change	✅ Yes
Tracking renders or performance	✅ Yes
Storing component-level mutable data	✅ Yes

⚠️ Key Notes

Behavior	Yes/No
Persists between renders	✔ Yes
Causes re-render when changed	❌ No
Can store any value (object, number, function)	✔ Yes
Works with DOM refs	✔ Yes

🎉 Summary

useRef used to:

✔ Access DOM elements
✔ Store persistent values
✔ Avoid unnecessary re-renders
✔ Track previous values or timers

React useRef Hook