useRef we can create a mutable value that exists for the lifetime of the component instance.
We start by wrapping a value, e.g.
const myRef = useRef(42). Then, we use
myRef.current to access or update the mutable value.
All React components can be passed a ref using the
ref prop, in which case React will automatically assign the instance of the component, or the underlying DOM node, to
myRef.current. We often do this to access imperative DOM node APIs, such as calling
focus on an input element, or measuring an element with
Mutable value example
In this example, we store the return value of
setInterval, which is an interval id, so that we can later call
In this example, we pass our ref to a
canvas component. React will then assign the canvas's underlying DOM node to our ref's
current property. This lets us call the imperative APIs of
canvas to draw within it.
Since we call
useEffectwith an empty dependencies array here, we'll only draw to the canvas once after the initial render.