Why does 'useRef' exist? What's it intended for?

I recently ran into a problem in a project I didn't create, where I needed to collect renders from child elements for the purpose of pooling them before querying a server.
The intent was to prevent a full UI refresh, which requires querying the server, after each user interaction. So I pooled them until the user stopped making changes for a short moment and then query the server.

Initially I used useState because I'm still very new to React and it was all I knew of, besides useEffect.
So I was quite confused when everything broke afterwards. "Broke" meaning that after any interaction was "pooled" a render happened, and it took quite a while to find out that useState caused that.
The render was a problem because the parent element didn't have the updated state of the children at that point yet so it rendered them wrong. The child elements rendered themselves fine, which is why I needed to prevent the parent's render.

So I was looking for an alternative that would not cause a render on each update. Which made me eventually run into useRef.

Except that useRef not only doesn't cause a render, it also doesn't cause a dependancy trigger...
At which point I'm confused and wonder why I should use it at all, because at that point it's a bothersome way of using a normal variable.
<var>.current = vs <var> =

I thought the whole point of React was the dependancy chain, and with useRef not supporting that I'm at a loss why it exists...

Which is why I'd appreaciate if anyone could explain to me or link me an explaination (except the official docs, already read that, still don't get it), why useRef is that way, and why I shouldn't just use a "normal" variable instead.

PS: I don't need a solution to the initial problem, I've by now worked around the lack of dependancy updates. This is just for understanding and the situation that led into the confusion.

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 useRef is 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.