If you have tried reading the docs over and over again but you still don't understand useRef, this post is for you!
What is useRef?
useRef is like a box where you can store something for later use. A number, an object, anything you want.
The thing you save in this box is preserved between renders, similar to
useState. In other words, the box is not destroyed when your component is updated.
And when you change the box content, nothing happens to the component. The box content changes, but the component remains the same.
- Unlike component state variables (
useState), updating a ref value doesn't trigger a new render.
- Are you coming from class components? Ok, it is like storing something in an instance variable (
this.value = someValue).
What is it used for?
useRef is used to store something in the component "memory" but it doesn't trigger a new render when the value is updated.
But what is it used for?
Well, there are two main use cases:
1) To store DOM elements so you can later do something with it.
For example, you can focus the password input when the user press "ENTER" on the email input:
You can do it with
useRef (source code):
2) To store values you want to keep an eye on
Sometimes you want to keep an eye on a value but you don't need to trigger new renders when it changes.
This is a simple application that display a counter and its previous values. It also has two buttons to increase the counter (by 1 and by 10):
Hey, I wrote a 10-page e-book about you can download for FREE 🎁 to overcome analysis paralysis when building React applications. It is about:
- Code styling and quality.
- Organizing your project files.
- How to manage your state.
You can grab it below: