📌 Refs with useRef() in React

useRef() is a React Hook that lets you create a reference to a DOM element or a mutable variable that doesn’t cause re-renders when updated.

🔍 Accessing DOM Elements

A common use case for useRef is to access a DOM element directly — like focusing an input.

import React, { useRef } from "react";

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

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

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

Here, inputRef.current gives us direct access to the input DOM node.

🧠 Storing Persistent Values

useRef can also store values across renders without triggering a re-render.

function RenderCounter() {
  const count = useRef(0);

  React.useEffect(() => {
    count.current += 1;
    console.log("Render count:", count.current);
  });

  return <p>Check console for render count</p>;
}

Since useRef does not re-render the component, it's perfect for keeping track of values like timers or render counts.

📌 useRef vs useState

• useState updates trigger re-renders.
• useRef updates do not cause re-renders.
• Use useRef when you need to persist values or access DOM nodes.