How do you create and use refs?
There are two ways to use refs:
createRef or useRef method
Callback method
createRef() method : Refs are created using React.createRef() method and attached to React elements via the ref attribute. To use refs throughout the component, just assign the ref to the instance property within a constructor.
Callback method : we add a ref attribute to your component whose value is a callback function that will receive the underlying DOM element or the mounted instance of the component as its first argument.
We simply set the ref attribute in the <input> with a function instead of ref attribute created by useRef().
This function receives the DOM node and assigns it to the inputRef we declared before.
Since we didn't create a ref with useRef the inputRef variable stores the DOM element itself hence we don't need to access the .current property, as you can see in the onClick and onFocusClick functions.