useRef

🔍 What Is It?

useRef(initialValue) returns a plain object { current: initialValue }. The object persists for the lifetime of the component. You can read and write ref.current freely — it will not trigger a re-render.

Two main uses:

1. DOM access:

const inputRef = useRef<HTMLInputElement>(null);
<input ref={inputRef} />
inputRef.current?.focus();

2. Mutable values without re-render:

const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
timerRef.current = setInterval(tick, 1000);
clearInterval(timerRef.current);

🎯 Why Do We Need It?

Some values need to persist between renders but should not cause re-renders:

• →A timer ID (setInterval/setTimeout) — you need to clear it later, but storing it in state would cause a re-render
• →A previous value (to compare with current)
• →A flag to prevent double-submission or track if a component is still mounted
• →A third-party library instance (Chart.js, Stripe, maps)

And sometimes you need to interact with the actual DOM node — something React's virtual DOM intentionally abstracts away but occasionally you need to bypass: focus management, scroll position, canvas drawing, integrating non-React libraries.

🏗️ What Happens in Real Projects?

In a real banking application:

• →Focus the first invalid form field after submission attempt
• →Store a WebSocket instance and close it on unmount
• →Track whether a payment form has been submitted (prevent double-submit)
• →Store the previous account balance to animate the difference
• →Hold a Chart.js instance for a spending trend chart
• →Scroll a message list to the bottom when new messages arrive

⚙️ How It Works

React creates the { current } object once and returns the same object on every render. When you write ref.current = newValue, you are mutating the object directly — React does not know about this change and does not re-render.

DOM refs:

When you pass a ref to a JSX element's ref prop, React sets ref.current to the DOM node after mounting, and sets it back to null after unmounting. The DOM node is available in useEffect (after render) but not during render.

Forwarding refs:

To pass a ref through a custom component to its inner DOM element, use React.forwardRef. This is essential for design system components.

💻 Example

useRef Patterns in Production — DOM access, mutable values, and the previous-value pattern.

function SearchBar({ onSearch }: { onSearch: (query: string) => void }) {
  const inputRef = useRef<HTMLInputElement>(null);

  // Focus the input on mount
  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  // Focus after clearing
  const handleClear = () => {
    if (inputRef.current) {
      inputRef.current.value = '';
      inputRef.current.focus();
    }
  };

  return (
    <div className="search-bar">
      <input
        ref={inputRef}
        type="search"
        placeholder="Search policies..."
        onChange={(e) => onSearch(e.target.value)}
      />
      <button onClick={handleClear} aria-label="Clear search">✕</button>
    </div>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits