使用 useRef().current 而不是 useRef() 有什么区别吗？

Question

I have a question about the declaration of references in React using the useRef hook.

Is there any difference between doing this:

 const inputRef = useRef(null).current;

 ...

 inputRef?.focus();

and this:

 const inputRef = useRef(null);
 
 ...

 inputRef.current?.focus();

??

In my code the behaviour is the same but in some situations, with other use cases, I have different results.

For example:

 const arrayRef = useRef(null);
 arrayRef.current = data; // data is an array of numbers

seems not to be the same as

 const arrayRef = useRef(null).current;
 arrayRef = data;
 

But why? (Not really sure if isn't the same, but my code works unexpectedly using the second method.)

I would really appreciate your help. Thank you.

Answer 1

A problem with using .current is that that'll extract the current reference immediately . If the value is extracted at the time of render, but later a re-render occurs, but the initial render still uses the extracted reference somewhere, it'll be a reference to the old value in the ref which may not exist yet.

For a quick example:

const Foo = () => {
  const inputRef = useRef(null);
  useEffect(() => {
    window.addEventListener('custom-focus-the-input', () => {
      inputRef.current.focus();
    });
  }, []);
  return (
    <input ref={inputRef} />
  );
};

Above, the ref must be used as a plain ref. You can't extract it into its current value until you're inside the event listener, because the ref's reference changes on first render.

Also, for a ref to get its .current assigned properly, you have to put the ref itself in the returned JSX - don't put the .current value into the JSX, because that won't result in the .current property of the ref changing.

---

In general - only extract the .current value from the ref until you need to use it shortly in subsequent synchronous code.

Answer 2

useRef (like almost all react hooks) effectively supplies an instance variable to something that doesn't have an instance (a functional component isn't backed by an instance - it's a function, but react keeps track of it's lifecycle via fiber's and other cool magic).

Now that you know it's just an instance variable, it becomes clear that instance variables are only useful if they can be assigned things.

In the context you've given :

const animatedOpacity = useRef(new Animated.Value(0)).current;

The instance variable is assigned an Animated.Value . It never needs to be reassigned because Animated.Value (which is the current property of the ref) is manipulated/reassigned using other functions, like Animated.timing .