Introduction

In the previous chapter, we learned about the functionalities of React Refs, and we discussed a few scenarios where refs could be used. In this chapter, we will continue to explore other such practical use cases and look at situations when we might want to use refs. A few such scenarios include binding external libraries to React, triggering animations, handling DOM actions, such as focusing on a text field, text selection, and media playback. Imagine a scenario where you have designed a React application that requires the integration of the functionalities of the Google Maps library. Refs in React make the process easier since we can access the DOM nodes of this library with the help of Refs. Since Refs are often best used in co-operation with other React utilities, we will take a brief look at a couple of such utilities, too, in particular, cloneElement and createPortal. During this chapter, we will get to know how to make use of Refs in our code and solve some problems...