DEV Community 👩‍💻👨‍💻


Posted on

Refs in React

What are Refs?? anyone??

Image description
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() {

  return (
        ref={Input} />
        value="Focus the input"
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

16 Libraries You Should Know as a React Developer

>> Check out this classic DEV post <<