Understanding Refs and the useRef Hook

A ref, short for reference, is a plain object with a single property, current, that React keeps for a component from one render to the next. You can read and change ref.current whenever you like, and changing it does not make the component render again. You create a ref with the useRef hook:

const myRef = useRef(initialValue);

On the first render, useRef returns an object whose current is initialValue. On every later render, it returns the same object, with whatever value you last stored in it. If you call useRef() with no argument, current starts as undefined