How to use refs in React with Typescript

If you’re using React 16.3+, the suggested way to create refs is using React.createRef().

class TestApp extends React.Component<AppProps, AppState> {    private stepInput: React.RefObject<HTMLInputElement>;    constructor(props) {        super(props);        this.stepInput = React.createRef();    }    render() {        return <input type="text" ref={this.stepInput} />;    }}

When the component mounts, the ref attribute’s current property will be assigned to the referenced component/DOM element and assigned back to null when it unmounts. So, for example, you can access it using this.stepInput.current.

For more on RefObject, see @apieceofbart's answer or the PR createRef() was added in.

If you’re using an earlier version of React (<16.3) or need more fine-grained control over when refs are set and unset, you can use “callback refs”.

class TestApp extends React.Component<AppProps, AppState> {    private stepInput: HTMLInputElement;    constructor(props) {        super(props);        this.stepInput = null;        this.setStepInputRef = element => {            this.stepInput = element;        };    }    render() {        return <input type="text" ref={this.setStepInputRef} />    }}

When the component mounts, React will call the ref callback with the DOM element, and will call it with null when it unmounts. So, for example, you can access it simply using this.stepInput.

By defining the ref callback as a bound method on the class as opposed to an inline function (as in a previous version of this answer), you can avoid the callback getting called twice during updates.

There used to be an API where the ref attribute was a string (see Akshar Patel's answer), but due to some issues, string refs are strongly discouraged and will eventually be removed.

Edited May 22, 2018 to add the new way of doing refs in React 16.3. Thanks @apieceofbart for pointing out that there was a new way.

React.createRef (class comp.)

class ClassApp extends React.Component {  inputRef = React.createRef<HTMLInputElement>();    render() {    return <input type="text" ref={this.inputRef} />  }}

React.useRef (Hooks / function comp.)

const FunctionApp = () => {  // note the passed-in `null` arg ----------------v  const inputRef = React.useRef<HTMLInputElement>(null)  return <input type="text" ref={inputRef} />}

inputRef.current becomes a readonly property by initializing its value with null.

const FunctionApp = () => {  const renderCountRef = useRef(0)  useEffect(() => {    renderCountRef.current += 1  })  // ... other render code}

Note: Don't initialize useRef with null in this case - it would make the renderCountRef type readonly (see example). If you need to provide null as initial value, do this:

const renderCountRef = useRef<number | null>(null)

Callback refs (both)

// Function component example, class analogue const FunctionApp = () => {  const handleDomNodeChange = (domNode: HTMLInputElement | null) => {    // ... do something with changed dom node.  }  return <input type="text" ref={handleDomNodeChange} />}

Note: String Refs are considered legacy and omitted for the scope of this answer.

Playground sample

One way (which I've been doing) is to setup manually :

refs: {    [string: string]: any;    stepInput:any;}

then you can even wrap this up in a nicer getter function (e.g. here):

stepInput = (): HTMLInputElement => ReactDOM.findDOMNode(this.refs.stepInput);