React Useref Property Not Exist On Type Never

2 min read.

You're using useRef and TypeScript is yelling at you:

const inputRef = useRef(null);

inputRef.current.value; // Property 'value' does not exist on type 'never'

That type 'never' is confusing. Let's fix it.

Why it happens

useRef(null) infers the type as MutableRefObject<null>, which means current can only be null. TypeScript narrowed it to never because after initializing with null, it assumes the ref will never have a value.

The fix

Option 1: Provide a type argument

const inputRef = useRef<HTMLInputElement>(null);
inputRef.current.value; // Works
inputRef.current.focus(); // Also works

Option 2: Use undefined as initial value

const inputRef = useRef<HTMLInputElement | undefined>(undefined);
inputRef.current?.value; // Safe with optional chaining

Option 3: Create the ref in a useEffect

const inputRef = useRef<HTMLInputElement>(null);

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

For callback refs

const setInputRef = (element: HTMLInputElement) => {
  inputRef.current = element;
};

return <input ref={setInputRef} />;

TL;DR

Just add the type argument:

const ref = useRef<HTMLInputElement>(null);

That's it. useRef<HTMLElement>(null) tells TypeScript what type the ref will hold.

Latest Posts