[TypeScript](/courses/typescript) refs should describe the value or DOM element that will eventually be stored in the ref. For DOM access, the generic type normally matches the corresponding DOM element type. ### Typing an Input Ref ```tsx import { useRef } from "react"; function SearchBox() { const inputRef = useRef(null); function focusSearch() { inputRef.current?.focus(); } return ( <> ); } ``` The type: ```tsx HTMLInputElement ``` tells [TypeScript](/courses/typescript) that `current` can eventually reference an input DOM [node](/courses/nodejs). Because the element does not exist before it is mounted, the initial value is: ```tsx null ``` and code commonly handles that possibility with: ```tsx inputRef.current?.focus(); ``` ### Other DOM Ref Types ```tsx const buttonRef = useRef(null); const divRef = useRef(null); const videoRef = useRef(null); const formRef = useRef(null); ``` ### Refs Can Store Non-DOM Values Too ```tsx const timerRef = useRef(null); ``` or another type appropriate to the runtime value. The important rule is: ```text Generic parameter → describes ref.current ``` ### Typing a ref Prop in Modern React Starting with [React](/courses/reactjs) 19, [function](/javascript/functions-in-javascript) components can receive `ref` as a prop. For example: ```tsx import type { Ref } from "react"; type SearchInputProps = { placeholder?: string; ref?: Ref; }; function SearchInput({ placeholder, ref }: SearchInputProps) { return ( ); } ``` Usage: ```tsx const inputRef = useRef(null); ; ``` ### Reuse Native Input Props and Ref Types Instead of manually recreating every input prop, modern reusable components can use [React](/courses/reactjs)'s utility types: ```tsx type SearchInputProps = React.ComponentPropsWithRef<"input">; function SearchInput({ ref, ...props }: SearchInputProps) { return ( ); } ``` This gives the component standard input props such as: ```text placeholder value onChange disabled name ref ``` with their existing React types. ### What About forwardRef? React 18 and older code commonly types reusable refs with `forwardRef`: ```tsx const SearchInput = React.forwardRef< HTMLInputElement, SearchInputProps >(function SearchInput(props, ref) { return ; }); ``` You will still encounter this pattern in existing applications and libraries. React 19 allows new [function](/javascript/functions-in-javascript) components to receive `ref` as a prop, reducing the need for `forwardRef` in new code. ### React 19 useRef Note Current React TypeScript definitions require `useRef` to receive an initial value. For example: ```tsx useRef(null); ``` rather than calling: ```tsx useRef(); ``` without an argument. ### Interview-Ready Answer React refs are typed by passing the value type to `useRef`, such as `useRef(null)` for an input DOM [node](/courses/nodejs). Different DOM elements use their corresponding DOM types. In React 19, function components can receive `ref` as a typed prop, and `ComponentPropsWithRef` can reuse the native element's complete prop and ref types. Older code commonly uses `forwardRef`.