`let count = useRef(0).current` 的缺点是什么

Question

Example Code:

(Pretend we are inside component function)

let count = useRef(0).current

useEffect(()=>{
  count++
  console.log(count)
}, [count])

Question:

1. What will happen if I run this code

(I am afraid that the endless loop execution will blow up my m1 chip macbookair, so I didn't run ^_^).

2. Should I awalys some_ref_object.curent = some_value to change the value?

Answer 1

The code probably will not do what you expect.

useRef returns a mutable object, where the object is shared across renders. But if you extract a property from that object into a variable and then reassign that variable, the object won't change.

For the same reason, reassigning the number below doesn't change the object:

 const obj = { foo: 3 }; let { foo } = obj; foo = 10; console.log(obj);

In your code, the ref object never gets mutated. It is always the following object:

{ current: 0 }

So

let count = useRef(0).current

results in count being initially assigned to 0 at the beginning of every render.

This might be useful if for some odd reason you wanted to keep track of a number inside a given render, not to persist for any other render - but in such a case, it'd make a lot more sense to remove the ref entirely and just do

let count = 0;

Your effect hook won't do anything useful either - since count is always 0 at the start of every render, the effect callback will never run (except on the first render).

Should I awalys some_ref_object.curent = some_value to change the value

You should use current , not curent . But yes - if you want the change to persist, assign to a property of the object, instead of reassigning a standalone variable. (Reassigning a standalone variable will almost never have any side-effects.)

But, if you have something in the view that the count is used in - for example, if you want to return it in the JSX somewhere - you probably want state instead of a ref (or a let count = 0; ), so that setting state results in the component re-rendering and the view updating.

Answer 2

I just tried it on my colleague's computer, and fortunately it didn't blow up

Conclusion 1:

The useEffect won't effect, because ref can't be denpendency.

Conclusion 2:

Only let count = useRef(0).current is the right way.