CODEWITHSUNDEEP
reactjstypescriptreact-hooks
JPollock
JPollock

Reputation: 3558

What typescript type do I use with useRef() hook when setting current manually?

How can I use a React ref as a mutable instance, with Typescript? The current property appears to be typed as read-only.

I am using React + Typescript to develop a library that interacts with input fields that are NOT rendered by React. I want to capture a reference to the HTML element and then bind React events to it. 

  const inputRef = useRef<HTMLInputElement>();
  const { elementId, handler } = props;

  // Bind change handler on mount/ unmount
  useEffect(() => {
    inputRef.current = document.getElementById(elementId);
    if (inputRef.current === null) {
      throw new Exception(`Input with ID attribute ${elementId} not found`);
    }
    handler(inputRef.current.value);

    const callback = debounce((e) => {
      eventHandler(e, handler);
    }, 200);

    inputRef.current.addEventListener('keypress', callback, true);

    return () => {
      inputRef.current.removeEventListener('keypress', callback, true);
    };
  });

It generates compiler errors: semantic error TS2540: Cannot assign to 'current' because it is a read-only property.

I also tried const inputRef = useRef<{ current: HTMLInputElement }>(); This lead to this compiler error:

Type 'HTMLElement | null' is not assignable to type '{ current: HTMLInputElement; } | undefined'.

  Type 'null' is not assignable to type '{ current: HTMLInputElement; } | undefined'.

Upvotes: 178

Views: 130284

Answers (4)

Retsam
Retsam

Reputation: 33449

Yeah, this is a quirk of how the typings are written:

function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T | null): RefObject<T>;
  • If the type of the initialValue and type parameter T match, you'll hit the first override and get a MutableRefObject<T>.
  • If the type of the initialValue includes null and type parameter T doesn't, you'll hit the second override and get an immutable RefObject<T>.

You're hitting the second case when you're doing this:

useRef<HTMLInputElement>(null)

T is specified as HTMLInputElement and the type of null is inferred as HTMLInputElement | null.

You can hit the first case by doing this:

useRef<HTMLInputElement | null>(null)

T is specified as HTMLInputElement | null and the type of null is inferred as HTMLInputElement | null.

Upvotes: 412

Gucal
Gucal

Reputation: 923

as key.

You can use it like this for input component.

const inputRef = useRef<HTMLInputElement>();

Upvotes: 19

alambratoor
alambratoor

Reputation: 13

you have to write code like this:

const inputRef = useRef<HTMLInputElement>(null);

and when you need to use it you have to write it like this:

inputRef.current?.focus();

Upvotes: 1

Luisus
Luisus

Reputation: 413

I came to this question by searching how to type useRef with Typescript when used with setTimeout or setInterval. The accepted answer helped me solve that.

You can declare your timeout/interval like this

const myTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)

And to clear it and set it again, you do it as usual:

const handleChange = () => {
  if (myTimeout.current) {
    clearTimeout(myTimeout.current)
  }
  myTimeout.current = setTimeout(() => {
    doSomething()
  }, 500)
}

The typing will work both if you're running in Node or in a Browser.

Upvotes: 11

Related Questions