We use refs when you want a component to “remember” some information, but don’t want that information to trigger new renders.
ref returns a reference to the element.
Refs are an escape hatch to hold onto values that aren’t used for rendering. You won’t need them often.
A ref is a plain JavaScript object with a single property called current, which you can read or set.
You can ask React to give you a ref by calling the useRef Hook.
Like state, refs let you retain information between re-renders of a component.
Unlike state, setting the ref’s current value does not trigger a re-render.
Don’t read or write ref.current during rendering. This makes your component hard to predict.
If your component needs to store some value, but it doesn’t impact the rendering logic, choose refs.
Storing timeout IDs
Storing and manipulating DOM elements
Storing other objects that aren’t necessary to calculate the JSX.