JIYIK CN >

Adding types to the useRef hook might be a little confusing at first, let’s see why this is the case:

import {useEffect, useRef} from 'react';

export function RefDemo() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
}

In the above code snippet, we get several errors - the errors are quite lengthy and confusing when we hover over the ref attribute - in summary, inputRef.currentis probably undefined and cannot be assigned to HTMLInputElement.

To fix the error we have to do a few things:

First, add a generic to useRefthe hook and pass in HTMLInputElementas the type.

- const inputRef = useRef();
+ const inputRef = useRef<HTMLInputElement>();

How we get the name is when we hover over the input element we see something like this:

(property) JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>

We can see the type is HTMLInputElement. We can also control click in VSCode and read the declaration file to get the type of any element.

Second, even after adding generics, TypeScript will tell us that we may not actually pass ref to the input element, so because we did not pass an initial value to it useRef, the value of ref may be undefined. So we have to tell TypeScript inputRef.currentthat the value is initialized to null and is either null or HTMLInputElement.

import {useEffect, useRef} from 'react';

export function RefDemo() {
  const inputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    inputRef?.current?.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
}

Because TypeScript doesn't know if we're assigning a ref to an input element, we still have to conditionally call the focus() function on the ref.