-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Learn React with TypeScript
By :

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.
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.
The...