React Hooks in Action

5 Managing component state with the useRef hook

This chapter covers

• Calling the useRef hook to obtain a ref
• Updating a ref by assigning values to its current property
• Updating state without triggering re-renders
• Setting the ref attribute in JSX to assign DOM element references to a ref
• Accessing DOM element properties and methods via a ref

While most of the values stored by your component will be directly represented in the user interface of your application, sometimes you’ll use a variable only for the mechanics of your app rather than for consumption by users. You may want to use setTimeout or setInterval as part of an animation, so you need to keep hold of the IDs they return. Or you may want to work with DOM form elements as uncontrolled ...