Why React Refs?

In React, we use Refs to access, manipulate, and interact with the DOM directly. Direct references to HTML elements allow us to perform tasks that are commonly encountered when creating client-side applications. Those tasks include, but are not limited to:

• Handling native events on DOM elements, such as focus and hover
• Measuring DOM element dimensions inside the browser directly
• Locking scrolling on view containers outside the React app

In this chapter, you will learn about the usage of Refs, different methods for how and where to apply them, and finally, how to abstract and hide their implementation details.

In order to understand the purpose of using React Refs, we have to first understand what DOM elements are and the meaning of references in relation to them.

References

For JavaScript to interact with and manipulate a DOM element, it needs a reference to that element. This reference is simply an object representation of a DOM element...