Hooks useRef note

useRef is a vary useful API in react hooks

It returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). And the returned object will persist for the full lifetime of the component

I have listed two common ways to use the useRef:

access a child imperatively

First of all, is a common use case is to access a child imperatively:

This is example from the Official website

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Through that way, we can managing focus, text selection, or media playback and others, If you are interested in it, you can learn from there

keep mutable value

In addition, we can use useRef to keep mutable value which need to be read frequently. From my perspective, it’s better than useState when you need some value that have changed and you want to use it immediately.

Just as you know, useState can’t refresh the value at once, I’ve wrote a blog about that problem.

By the way, there is a tip when you want to use it, useRef doesn’t notify you when its content changes and mutating the .current property will not cause a re-render.

So if you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.

If this blog helps you, can you give a like ! ! Thank you ! !