UseRef returns a mutable ref object whose.current property is initialized as the passed parameter (initialValue). The ref object returned remains constant throughout the life of the component.

UseRef does not notify you when the ref object’s contents change. Changing the.current property does not cause component rerendering. If you want to run some code when React binds or unbinds the REF of the DOM node, you need to use the ref callback to do so.

React:

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

The elegant use of useRef is one: it applies to DOM elements

const UseRefInput = (a)= > {
    const inputRef = useRef();
    const getInputValue= (a)= > {
    const value = inputRef.current.value;
    console.log(value);
}

    return<> <input ref={inputRef} type="text" /> <button onClick={getValue}> }Copy the code

UseRef elegant use two: save a value, such as timer ID, across the lifecycle

A timer component

export default() = > {const timer = useRef(null);
  const [count, setCount] = useState(0);

  useEffect((a)= > {
    timer.current = setInterval((a)= > {
      setCount(count= > count + 1);
    }, 1000);
    return (a)= > clearInterval(timer.current);
  },[]);

  return (
    <>
      <span>Start the time</span>
      <span>{count}</span>
    </>
  );
}
Copy the code

UseRef returns a mutable REF object that remains constant throughout the life of the component. The timer function is extracted, each time the timer triggers, can get the latest count

function Counter() {
  const [count, setCount] = useState(0);
  const myRef = useRef(null);

  myRef.current = (a)= > {
    setCount(count + 1);
  };

  useEffect((a)= > {
    const id = setInterval((a)= > {
      myRef.current();
    }, 1000);
    return (a)= >clearInterval(id); } []);return <h1>{count}</h1>;
}
Copy the code