When you declare a useState variable like this:
const [stateTitle, stateTitle_set] = useState('Hello State World!');
when you need to use it, in JSX for example, you just enter the name of the variable.
<h1>{stateTitle}</h1>
But when you declare a useRef variable like this:
const refTitle=useRef("Hello Ref World!");
every time you use that variable, you have to add in the .current suffix.
<h1>{refTitle.current}</h1>
I don't see how it is possible to use the name of the reference variable without the .current suffix. And the .current is the only suffix I see suggested by intellisense, so I don't see what other suffix might replace it.
In conclusion, I don't see why React can't just understand that refTitle means refTitle.current. Why you can't just write:
<h1>{refTitle}</h1>
Top comments (2)
It's done because Refs are constants but constants can't be modified though an constant objects properties can.
This allows the reference to the object to never change, preventing redraws, but the actual values to change over time.
But state values are constants also:
const [stateTitle, stateTitle_set] = ...and they can be used directly, without dragging a
.currentbehind them.