React. useRef hook

UseRef hook features and use cases

Photo by Reproductive Health Supplies Coalition on Unsplash

Since the hooks appeared, you have probably gotten “tired” of using useState and useEffect in your functional components. At the end of the day, they are probably the most intuitive to use within the React universe.

However, the useRef hook is less common despite its interesting characteristics and because without it we would not be able to implement certain functionalities (something that we will see at the end of this article). Therefore, in this article I want to tell you about its operation and its most interesting use cases.

Let’s go there!

UseRef hook characteristics

The useRef hook has its origin in the createRef method that is used in class components and that allowed to create a “reference” (forgive redundancy) to a DOM element created during rendering.

This part is important. In React, the most common thing when we want to modify an element of the DOM is to force a new render by means of a change in the state, that is, we delegate the generation of the DOM to React, which will build the tree based on the properties passed to the elements. We can see it as a case of declarative programming.

However, there are times when we need to modify a DOM element imperatively, for…