React useRef is a hook used to reference html elements (commonly inputs).

If we read the useRef definition from React docs:

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

So by reading above we can use useRef to persist variables throughout the lifetime of our app.

function App() {
    const greeting = useRef("hello world")

    //  mutating the object
    ref.current = "goodbye world"
} 

Why not use a plain variable ?

The problem with variables is that they get re-initialized every time when you refresh the page or the component gets re-rendered

What about useState ?

Sure the state is persisted But the difference is when you update the state the component gets re-rendered.

What are the use cases ?

The only time i've found a use case for useRef is when i was building an infinite scroll component,

When the user reaches the end of the page the component fetches more data based on a page token (it represent the current page). The page token need to be updated on every subsequent request to match the next page. This is where i found useRef suitable for the job.

That's why i started this disscussion, What is your opinion on using useRef for storing variables ? Did you use it to solve a problem ?