Using React's "useRef" hook with Typescript

Published

To use the useRef hook with Typescript, make sure to define a return type that matches your element type. In this example, the ref is to an HTMLInputElement.

function MyComponent() {
	const input = React.useRef<HTMLInputElement>(null);

	return (
		<form
			onSubmit={(e) => {
				e.preventDefault();
				alert("Value: " + input.current.value);
			}}
		>
			<input ref={input} />
		</form>
	);
}