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

Latest comments (0)

We are hiring! Do you want to be our Senior Platform Engineer? We're hiring for a Senior Platform Engineer and would love for you to apply.

Head here to learn more about who we're looking for.