Brave Search

React will set the current property back to null when the node is removed from the screen. Read more about manipulating the DOM with refs. 1. Focusing a text input 2. Scrolling an image into view 3. Playing and pausing a video 4. Exposing a ref to your own component · In this example, clicking the button will focus the input: ... import { useRef } from 'react'; export default function Form() { const inputRef = useRef(null); function handleClick() { inputRef.current.focus(); } return ( <> <input ref={inputRef} /> <button onClick={handleClick}> Focus the input </button> </> ); }

W3Schools

w3schools.com › react › react_useref.asp

React useRef Hook

React Compiler React Quiz React Exercises React Syllabus React Study Plan React Server React Interview Prep React Bootcamp React Certificate ... The useRef Hook allows you to persist values between renders.

Discussions

What is useRef for? When should I use it?

useRef is like a box where you can store something. A number, an object, anything you want.

This value is persisted between renders. So if you save in this box some value, it will be available in the next render.

And unlike useState, changes in your useRef "box" does not trigger a new render.

Some comparisons (not technical):

It is similar to useState, but it doesn't triggers a new render.
If you come from class components, it is like storing an instance variable (this.value = someValue).

What is it used for?

to store mounted components: <Input ref={myRef} /> so you can later do something. For example, trigger a focus on this element: myRef.current.focus()
To store anything you want (like useState) BUT without triggering a new render.

I wrote about this here.

Videos

11:18

YouTube

React useRef() hook introduction 🗳️ - YouTube

Learn React Hooks: useRef - Simply Explained! - YouTube

June 1, 2023

11:05

YouTube

React Tutorial - Learn useRef in 11 Minutes - YouTube

May 21, 2025

10:20

YouTube

Learn useRef in 11 Minutes - YouTube

useRef React Hook Explained in 11 Minutes: Learn React Hooks with ...

February 24, 2025

View all

GeeksforGeeks

geeksforgeeks.org › reactjs › react-js-useref-hook

ReactJS useRef Hook - GeeksforGeeks

16:13

Clicking the button increases the count by 1 and updates both the current and previous counts. Direct DOM Manipulation: You can directly access and manipulate DOM elements without triggering a re-render. Persisting Values Across Renders: Use useRef to store values (such as previous state values) that should persist across renders without triggering unnecessary updates.

Published January 22, 2026

Wisdom Geek

wisdomgeek.com › development › web-development › react › understanding-the-useref-react-hook

Understanding the useRef React hook - Wisdom Geek

October 11, 2023 - If the component were to re-render, the object created by useRef would be persisted. The one created using createRef would point to a new object. If you want to look at another example of this in a practical example, you can check our previous post on detecting a click outside a React component using the useRef hook.

Hygraph

hygraph.com › blog › react-useref-a-complete-guide

React useRef() - A complete guide | Hygraph

January 21, 2026 - Unlike state variables managed ... component's behavior. When React encounters a useRef() Hook, it returns a plain JavaScript object with a single property: current....

Refine

refine.dev › home › blog › tutorials › understanding the react useref hook

Understanding the React useRef Hook | Refine

October 16, 2024 - The useRef hook takes an initial value of any type as argument and returns an object with a single current property. ... React will set the initialValue you pass to the useRef hook as the value of the current property of the returned ref object.

Kinsta®

kinsta.com › home › resource center › blog › react › understanding the useref hook in react

Understanding the useRef Hook in React

2 weeks ago - The useRef Hook serves two main purposes: storing mutable values that do not cause a re-render when updated and storing references to DOM elements. Let’s explore how it works in more detail.

Frontendeng

frontendeng.dev › blog › 20-what-is-useRef-in-react-and-how-to-use-it

What is useRef in react and how to use it correctly | Front End Engineering

September 24, 2023 - useRef is a React hook that allows you to obtain a reference to the underlying DOM object associated with a React component. It is particularly useful when you need to make direct changes to the DOM object without relying on other React primitives.

Find elsewhere

Google Bing Mojeek

reddit.com › r/reactjs › what is useref for? when should i use it?

r/reactjs on Reddit: What is useRef for? When should I use it?

September 3, 2020 -

Hi! I'm currently learning the hooks i haven't used before, useRef is specifically hard for me to understand, What is it for? and when should I use it? I tried reading the docs over and over again and watching web dev simplified and Ben awads vids but I still don't understand it. Can anyone ELI5?

Top answer

1 of 2

useRef is like a box where you can store something. A number, an object, anything you want.

This value is persisted between renders. So if you save in this box some value, it will be available in the next render.

And unlike useState, changes in your useRef "box" does not trigger a new render.

Some comparisons (not technical):

It is similar to useState, but it doesn't triggers a new render.
If you come from class components, it is like storing an instance variable (this.value = someValue).

What is it used for?

to store mounted components: <Input ref={myRef} /> so you can later do something. For example, trigger a focus on this element: myRef.current.focus()
To store anything you want (like useState) BUT without triggering a new render.

I wrote about this here.

2 of 2

useRef is used when you want to track a value that's unique to a component instance but you don't want React to necessarily be notified when it updates.

The main reason to use it would be to keep track of a DOM element or to keep track of the previous props for comparisons sake.

These weren't necessary when we used class components because you could assign values to the instance of the class and React wouldn't track them, but in functions we can't use instance variables, hence Refs.

One of the downsides of React.useState() is that updating a state value results in the component re-rendering and that can sometimes be undesirable.

Dmitri Pavlutin

dmitripavlutin.com › react-useref

React useRef() Hook Explained in 3 Steps - Dmitri Pavlutin

April 3, 2023 - useRef(initialValue) is a built-in React hook that accepts one argument as the initial value and returns a reference (aka ref).

Medium

medium.com › @titoadeoye › react-hooks-useref-with-practical-examples-9ce71ad38d73

React Hooks: useRef (With Practical Examples!) | by Tito Adeoye | Medium

February 25, 2024 - In summary, the useRef hook in React is essential for handling mutable values that persist without causing re-renders and useful for interacting directly with the DOM. Unlike state variables, changes to a ref’s current property don't trigger ...

DEV Community

dev.to › nibble › what-is-useref-hook-and-how-do-you-use-it-5emo

What is useRef hook and how do you use it? - DEV Community

July 15, 2020 - For example if you want to access an input element after it has been mounted to the DOM, instead of using document.getElementById, document.querySelector or any other method for selecting DOM elements like in vanilla javascript, you can use useRef hook. This is illustrated in the example below. import React from "react"; import ReactDOM from "react-dom"; const App = (props) => { const inputRef = React.useRef(null); React.useEffect(() => { console.log(inputRef.current); inputRef.current.focus(); }, []); return ( <form> <input type="text" placeholder="Enter Name" name="name" ref={inputRef} /> </form> ); }; const root = document.getElementById("root"); ReactDOM.render(<App />, root);

Felix Gerschau

felixgerschau.com › how to use react's useref() hook | felix gerschau

How to use React's useRef() hook | Felix Gerschau

The last use case for useRef that I want to show you is holding a reference to the previous state. In my example on codepen, I've created a component that updates the name variable with an input field. To hold a reference to the last value of name, we can simply use the useEffect hook and make it execute on every change. In the callback, we then update the reference. const prevNameRef = React.useRef(''); React.useEffect(() => { prevNameRef.current = name; }, [name]);

ReScript

rescript-lang.org › docs › react › hooks-ref

useRef Hook | ReScript React

React.useRef returns a mutable ref object whose .current record field is initialized to the passed argument (initialValue).

React

react.dev › learn › referencing-values-with-refs

Referencing Values with Refs – React

You won’t need them often. A ref is a plain JavaScript object with a single property called current, which you can read or set. You can ask React to give you a ref by calling the useRef Hook.

Mimo

mimo.org › glossary › react › useref-hook

React useRef Hook: Syntax, Usage, and Examples

... Become a full-stack developer. Learn HTML, CSS, JavaScript, and React as well as NodeJS, Express, and SQL ... Build modern web apps with React. Learn components, hooks, state management, and React patterns ... To use useRef, call the hook and assign the result to a variable.

LogRocket

blog.logrocket.com › home › how to use the react useref hook effectively

How to use the React useRef Hook effectively - LogRocket Blog

April 7, 2025 - The useRef Hook works great for handling imperative actions like DOM manipulations. Instead of using JavaScript Web API methods, such as querySelector or getElementById, to select a DOM element in React, we utilize the useRef Hook to hold its ...

Stack Overflow

stackoverflow.com › questions › 75983499 › why-does-useref-exist-whats-it-intended-for

reactjs - Why does 'useRef' exist? What's it intended for? - Stack Overflow