Does useRef trigger re-renders?

No, changes to useRef's current property do not cause re-renders in React components.

What is the purpose of useRef in React? | FullStackPrep.Dev

💡 Concept Name

useRef – A React hook used to access DOM elements directly or to persist values between renders without triggering re-renders.

📘 Quick Intro

React's useRef hook provides a way to store a mutable value that doesn't cause a component to re-render when it changes. It's also commonly used to access or manipulate DOM nodes directly.

🧠 Analogy / Short Story

Imagine a notebook next to your computer where you quickly jot things down. You can reference it anytime without changing your computer’s state. That notebook is like useRef – a persistent place to store values without affecting the app’s reactivity.

Unlike state, changing a ref won’t refresh the screen. It's your hidden side drawer where you keep things like timers, counters, or DOM references — accessible, persistent, and discreet.

So, when you want to remember something or touch the real DOM without disturbing the React world, useRef is your go-to tool.

It's useful in animations, input focus, previous values tracking, and more — think of it as a stable shelf in a changing room.

🔧 Technical Explanation

🔁 useRef returns a mutable object with a .current property.
📦 The object persists across renders but changing .current does NOT trigger a re-render.
🔍 Often used to reference DOM elements (e.g., focus on input).
🧠 Great for storing timers, previous values, or any value that doesn't affect the UI directly.
⚠️ Avoid using useRef for things that should trigger a UI update — use state for that instead.

💻 Real Code Example


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

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

  useEffect(() => {
    inputRef.current.focus();
  }, []);

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

❓ Interview Q&A

Q1: What is the useRef hook in React?
A: It's a hook that returns a mutable object used to access DOM nodes or persist values across renders.

Q2: Does updating a ref cause re-render?
A: No, changes to ref.current do not trigger a re-render.

Q3: When would you use useRef instead of useState?
A: When you need to persist data across renders without re-rendering the UI.

Q4: Can useRef be used to store previous values?
A: Yes, it's a common use case for tracking previous state or props.

Q5: Is useRef synchronous or asynchronous?
A: It's synchronous and updates immediately without delay.

Q6: How do you focus an input element using useRef?
A: Assign the input to ref and call ref.current.focus() inside useEffect.

Q7: What does useRef return?
A: An object like {{ current: null }} that can be mutated without triggering renders.

Q8: What’s a real-world example of useRef usage?
A: Managing timers, accessing DOM nodes, or storing user-entered values temporarily.

Q9: What’s the difference between useRef and createRef?
A: useRef is for functional components, while createRef is mostly used in class components.

Q10: Is it okay to use useRef to store non-DOM data?
A: Yes, it's ideal for storing any persistent data that shouldn't affect UI rendering.

📝 MCQs

Q1. What does useRef return?

A state tuple
A DOM node
A mutable object with a current property
A string ref

Q2. Does useRef cause re-renders when updated?

Yes
Only sometimes
No
It depends

Q3. When should you use useRef over useState?

For API calls
For routing
When you need to persist values without re-rendering
To handle props

Q4. What is a typical use of useRef?

Handle errors
Access DOM nodes
Render components
Style elements

Q5. How do you focus an input using useRef?

Use state
Use callback
Call ref.current.focus()
Apply autoFocus

Q6. Which hook doesn't re-render the component on value change?

useState
useEffect
useRef
useMemo

Q7. Which of the following is true about useRef?

It resets on render
It holds a persistent mutable value
It triggers effects
It is async

Q8. Can useRef store previous state values?

No
Only for numbers
Yes
Only with props

Q9. What is ref.current used for?

Rendering JSX
Updating state
Accessing the current DOM or value
Creating keys

Q10. When is useRef assigned in the component lifecycle?

Before render
After the component mounts
During cleanup
During prop updates

💡 Bonus Insight

useRef is excellent for referencing previous state or storing non-visual data like form inputs, timers, or even WebSocket instances. It’s your silent assistant — always there, but never disrupting React's rendering cycle.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon

What is the purpose of useRef in React?