CODEWITHSUNDEEP
javascriptreactjs
Bahman
Bahman

Reputation: 109

React.js useRef hook not returning the expected object

I'm using React hooks and I have the code below:

const [_va, _setva] = useState(0);
const va = useRef({current: _va});
console.log(va);

So according to the documentation, The expected value of va is an object which has a current property containing the desired value which is initially 0.

But when I run the script I got this result:

result

In other words, instead of the va.current containing the desired value, va.current contains another current property which contains the desired value. Which means I have to access va.current.current to access the desired value.

Does anyone know why this happens?

Upvotes: 0

Views: 825

Answers (1)

Chris Heald
Chris Heald

Reputation: 62688

You've misunderstood the doc; you will set the value of the ref, and it is returned in the current property of the returned object:

const ref = useRef("foo");
console.log(ref.current) // "foo"

The purpose of useRef is to give you an object whose reference does not change, but whose value may. That value is exposed as current. You can access and reassign ref.current at will, and ref remains unchanged.

Upvotes: 3

Related Questions