How to Use useRef Hook in React
How to Use useRef Hook in React

A quick explanation about the useRef hook in React.

This article provides a clear, practical explanation of the useRef hook in React. It explains a topic that sometimes causes a bit of confusion to developers, especially to React beginners.

The hook of useRef if you don’t have a clear idea of how this hook works? When do you have to use it? this article will be beneficial to you.

useRef Hook

The useRef is a function that can take an argument and return an object with a property current with its assigned value on it.

What If I want to change that value? Just write as follows val.current = “bar" and the value will change because useRef is mutable, which means that it can be assigned, with any value, including nodes and DOM elements.

Now the value var.current has changed, but the component will still be the same this is because useRef doesn’t re-render the component but let’s print the value of var.current .

The value has changed but is not reflected in the component. This is a handy feature because we can change the values of the component or properties in the DOM elements without re-rendering the component.

Access elements in the DOM

The most common way to use useRef is to access the DOM elements. The way to do this is to add a property ref in the DOM element.

By doing this, we can access the element with val.current and change their properties in the same way that is getting an element of the document with getElementById .

In the code above, I add a button that on click event, triggers a function that changes the text to ‘Hola Mundo’ and the background to red.

It works perfectly and without re-render the element.

Conclusions
['Alex Zambrano']
['Web Development', 'JavaScript', 'Hooks', 'React', 'React Hook']