Using the ref Hook

In this section, we will learn about the ref Hook and where it is useful. We will then walk through a common use case of the ref Hook by enhancing the PersonScore component we have been working on.

Understanding the ref Hook

The ref Hook is called useRef and it returns a variable whose value is persisted for the lifetime of a component. This means that the variable doesn’t lose its value when a component re-renders.

The value returned from the ref Hook is often referred to as a ref. The ref can be changed without causing a re-render.

Here’s the syntax for useRef:

const ref = useRef(initialValue);

An initial value can optionally be passed into useRef. The type of the ref can be explicitly defined in a generic argument for useRef:

const ref = useRef<Ref>(initialValue);

The generic argument is useful when no initial value is passed or is null. This is because TypeScript won’t be able to infer the type correctly.

...