useRef is like you said different from normal state variables managed with useState in React. While useState is designed to store state that causes re-renders when updated, useRef is designed to store mutable values that persist across renders without causing a re-render.
useRef is useful in the following situations:
Accessing DOM elements: It is often used to create references to DOM elements so that you can interact with them directly, e.g., focusing an input element.
Storing the previous state: It can store the previous state or value of a variable, which is useful in scenarios where you need to compare the current value with the previous value without causing re-renders.
Storing values that don't affect rendering: Sometimes you might need to store values that are not part of the component's render output, e.g., timers, intervals, or subscriptions. In this case, using
useRefis more suitable because it doesn't cause a re-render.
The main reason why useRef exists is to provide a way to manage values across renders without causing unnecessary updates. Although you can use a "normal" variable, it will not persist across renders as the component function will be executed again, and the variable will be re-initialized.
In summary, useRef is used for managing values that persist across renders without causing re-renders, while useState is used for managing state that affects the component's output and should cause re-renders when updated. They serve different purposes, and understanding when to use one over the other is essential for writing efficient React components.
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.
More on reddit.comreactjs - Why does 'useRef' exist? What's it intended for? - Stack Overflow
UseState vs. UseRef
I use useRef to store timeout id's so I can cancel them later.
current page and filters sound like thinkgs that should trigger a render though. You certainly show them on page, and the page should change, at least to a loading animation, if you don't have the data on hand.
More on reddit.comI still don't know useRef properly and don't know it's use case
Videos
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?
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.
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.