Refs in React

What are Refs?? anyone??

Don't know, I am here to help you. if You know how to manipulate the DOM(Document Object Model) using Vanilla Javascript. Then understanding this concept would be easier.
So the ref's concept is same as using document.getElementById, document.getElementByClassName or document.getElementByTagName in javascript. This method is used to get access of the current element or component in the DOM structure were we can manipulate it or change its CSS attribute, delete or add an element. Same in React.js the Refs hook is used to get the access of the current element, Where it passes the current element object. We can manipulate it by calling the current attribute of that object. It doesn't re-render while the element is manipulated.

Lets understand it with an example:-

function CustomTextInput(props) {
  const Input = useRef();

  function handleClick() {
Input.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={Input} />
      <input
        type="button"
        value="Focus the input"
        onClick={handleClick}
      />
    </div>
  );
}