Designing React Hooks the Right Way

Chapter 8: Use Ref to Hide Stuff

In the previous chapter, we learned how the React context is designed and how to use a useContext hook to make an update for an area. In this chapter, we will introduce another React entity, a ref. We will learn how to access a DOM element via a ref and walk through the design and source code behind the useRef hook. We will also describe how to work with a persistent value without dispatching an update. In the end, we'll apply refs to a couple of practical problems, such as clicking outside of the menu, avoiding memory leaks, setting up a mule, and locating the current value. And we'll also reveal two bonus topics in the Appendix section, the callback ref and forward ref.

We will cover the following topics in ...