Think of useRef as a useState that does not trigger a re-rendering of our component.

useRef(new Map()).current

The equivalent ways in functional components using Hooks:In a state variable: useState or useReducer. Updates in state variables will cause a re-render of the component.In a ref: Equivalent to instance variables in class components. Mutating the .current property won’t cause a re-render.

const isFirst = useRef(true)

You can also create your own custom hook that uses the useRef hook to keep track of if it's the first time the effect is being run, so that you can skip the first invocation.

The useRef creates an "instance variable" in functional component.

const useFocus = () => { const htmlElRef = useRef(null) const setFocus = () => {htmlElRef.current && htmlElRef.current.focus()} return [ setFocus, htmlElRef ] }