UseRef

You can access the current value of that ref through the ref.current property. This value is intentionally mutable, meaning you can both read and write to it. It’s like a secret pocket of your component that React doesn’t track. (This is what makes it an “escape hatch” from React’s one-way data flow—more on that below!)

Differences between refs and state

Here’s how state and refs compare:

refs state
useRef(initialValue) returns { current: initialValue } useState(initialValue) returns the current value of a state variable and a state setter function ( [value, setValue])
Doesn’t trigger re-render when you change it. Triggers re-render when you change it.
Mutable—you can modify and update current’s value outside of the rendering process. Immutable”—you must use the state setting function to modify state variables to queue a re-render.
You shouldn’t read (or write) the current value during rendering. You can read state at any time. However, each render has its own snapshot of state which does not change.

ref.current during render leads to unreliable code. (never re-render)

How does useRef work inside?