Demon Tech Roadmap

React

React useRef Hook

The useRef Hook holds data that doesn't trigger re-renders.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

The `useRef` Hook is like a secret pocket. It stores data that persists between renders, but unlike `useState`, updating it does not force the component to redraw. Developers also use it to grab direct references to HTML elements.

Example

1/* this references an input */
2import { useRef } from "react";
3
4function FocusApp() {
5  const inputRef = useRef();
6  return (
7    <>
8      <input ref={inputRef} />
9      <button onClick={() => inputRef.current.focus()}>Focus!</button>
10    </>
11  );
12}

Key Points

It returns an object with a `.current` property.
Changing `.current` does not re-render the component.
It provides direct access to HTML DOM nodes.
It is perfect for managing timers or focusing inputs.

Up Next

Continue your journey with the next topic.

Go to React useMemo ❯