6 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, there will be times when you 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 inputs, so you need to keep hold of references to those elements. Either way, you may not need to display these values to the user and so changing them shouldn’t automatically trigger a re-render.