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.