useRef

🔍 What is useRef?

useRef is a React Hook that creates a mutable reference — an object that holds a .current property. This reference:

• Persists across renders
• Does not trigger a re-render when updated

---

🧠 When to Use useRef

🔧 Common use cases:

• Accessing DOM elements (e.g., focus input)
• Storing mutable values (e.g., timers, previous values)
• Tracking values without re-renders

---

📦 Syntax

Part	Meaning
useRef()	Returns an object with .current
.current	Holds the value you want to persist
No re-render	Updating .current does not trigger re-renders

---

✅ 1. Accessing DOM Elements with useRef

🔍 Logic:

• useRef(null) creates a reference
• ref={inputRef} attaches it to <input>
• .current.focus() focuses the input on button click

✅ This is the React-safe way to access DOM nodes.

---

✅ 2. Storing Mutable Values (Without Re-rendering)

🔍 Logic:

• Tracks render count without causing re-render
• Ideal for logging/debugging render frequency

---

✅ 3. Hold Previous Value

🔍 Logic:

• Saves previous state value for comparison/display
• .current acts like a persistent memory box

---

🔁 useRef Behavior Summary

Property	Behavior
.current	Holds reference value
Persistence	Value preserved across re-renders
Re-render?	❌ Changing .current does not trigger re-render
DOM access	✅ Can access native HTML elements
JSX usage	Attach via ref={myRef}

---

🔍 Common Use Cases

Use Case	Example
Input focus control	Focus when component mounts
Scroll to element	Scroll a div into view
Countdown timer ID	Store timer ID in .current
Save previous state	Track old value of state or props
Skip first render	Track first load to prevent initial effect

---

⚠️ Do’s and Don’ts

✅ Do	❌ Don’t
Use for DOM access	Don’t use like state
Use for values between renders	Don’t update expecting re-render
Use to track things silently	Don’t use for UI-driven state changes

---

📌 Summary Table

Feature	Description
useRef()	Hook to store values without triggering re-render
.current	Mutable value that persists between renders
DOM Access	Attach via ref={...} to manipulate DOM elements
Non-UI Storage	Store timers, counters, previous values, or any reference

👉 Next: Explore useReducer ➡️