 provide a way to access DOM nodes or React elements created in the render method. Also, they can be used to store some references to entities or objects for accessing them later.

To use refs with functional components use a special 

 function, so we can pass a type-parameter, that will tell TypeScript what type is acceptable for this ref.

import React, {useRef} from 'react'

const EvilInput: React.FC = () => {
  // Explicitly tell TS that this ref will be an input
  // using `HTMLInputElement` as a type parameter.
  const inputRef = useRef<HTMLInputElement>(null);
  
  const onFocus = () => {
    if (!inputRef.current) return;
    inputRef.current.blur();
  }
  
  // Assign `inputRef` as a value for `ref` prop
  // to bind the element with the ref.
  return <input onFocus={onFocus} ref={inputRef} />
}

, because it will be set later on render. That's why we need to null-check 

 field. So to access the real element we need to get a value of this field.

In class components, you can store refs in private class fields after 

import React, {createRef} from 'react';

class EvilInput extends React.Component {
  // Store a ref in a private `inputRef` field:
  private inputRef = createRef<HTMLInputElement>();
  
  onFocus = (): void => {
    // When working with `inputRef`,
    // access it with `this.inputRef`
    // as a regular class field.
    if (!this.inputRef.current) return;
    this.inputRef.current.blur();
  }
  
  render() {
    return (
      <input 
        onFocus={this.onFocus} 
        // Now to bind the element with a ref
        // we use `this.inputRef` to access
        // a private class field:
        ref={this.inputRef} 
      />
    )
  }
}

When you need to access some data but you don't need to share it across components and don't need to change it you can use refs too.

import React, {useRef} from 'react'
import Player, {PlayerType} from 'som-third-party-lib';

const CustomPlayer: React.FC = () => {
  const playerRef = useRef<PlayerType>(new Player());

  // We can use non-null assertion here (! sign)
  // because we now that whenever we access this ref
  // its current value will be an instance of 
  // third party player.
  const start = () => playerRef.current!.play();
  const stop = () => playerRef.current!.pause();
  
  return (
    <>
      <button onClick={start}>Play!</button>
      <button onClick={stop}>Pause</button>
    </>
  )
}

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Use React Refs with TypeScript</h1><p><a href="https://reactjs.org/docs/refs-and-the-dom.html" rel="noopener noreferrer nofollow">Refs</a> provide a way to access DOM nodes or React elements created in the render method. Also, they can be used to store some references to entities or objects for accessing them later.</p><h2><a name="using-refs-with-functional-components" id="using-refs-with-functional-components">Using Refs with Functional Components</a></h2><p>To use refs with functional components use a special <code><a href="https://reactjs.org/docs/hooks-reference.html#useref" rel="noopener noreferrer nofollow">useRef</a></code><a href="https://reactjs.org/docs/hooks-reference.html#useref" rel="noopener noreferrer nofollow"> hook</a>.</p><p>It is a <a href="https://www.typescriptlang.org/docs/handbook/generics.html" rel="noopener noreferrer nofollow">generic</a> function, so we can pass a type-parameter, that will tell TypeScript what type is acceptable for this ref.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-KFoHu" id="cm-KFoHu">import React, {useRef} from 'react'

const EvilInput: React.FC = () =&gt; {
  // Explicitly tell TS that this ref will be an input
  // using `HTMLInputElement` as a type parameter.
  const inputRef = useRef&lt;HTMLInputElement&gt;(null);
  
  const onFocus = () =&gt; {
    if (!inputRef.current) return;
    inputRef.current.blur();
  }
  
  // Assign `inputRef` as a value for `ref` prop
  // to bind the element with the ref.
  return &lt;input onFocus={onFocus} ref={inputRef} /&gt;
}</textarea><p>Initially, we set a ref's value as <code>null</code>, because it will be set later on render. That's why we need to null-check <code>inputRef.current</code> later in <code>onFocus</code>.</p><p>Also, <code>inputRef</code> itself is an object that <em>contains</em> a value in the <code>current</code> field. So to access the real element we need to get a value of this field.</p><h2><a name="using-refs-with-class-components" id="using-refs-with-class-components">Using Refs with Class Components</a></h2><p>In class components, you can store refs in private class fields after <a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs" rel="noopener noreferrer nofollow">creating them with </a><code><a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs" rel="noopener noreferrer nofollow">createRef</a></code>.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-ZZlkJ" id="cm-ZZlkJ">import React, {createRef} from 'react';

class EvilInput extends React.Component {
  // Store a ref in a private `inputRef` field:
  private inputRef = createRef&lt;HTMLInputElement&gt;();
  
  onFocus = (): void =&gt; {
    // When working with `inputRef`,
    // access it with `this.inputRef`
    // as a regular class field.
    if (!this.inputRef.current) return;
    this.inputRef.current.blur();
  }
  
  render() {
    return (
      &lt;input 
        onFocus={this.onFocus} 
        // Now to bind the element with a ref
        // we use `this.inputRef` to access
        // a private class field:
        ref={this.inputRef} 
      /&gt;
    )
  }
}</textarea><h2><a name="using-refs-to-store-objects" id="using-refs-to-store-objects">Using Refs to Store Objects</a></h2><p>When you need to access some data but you don't need to share it across components and don't need to change it you can use refs too.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-5Gk21" id="cm-5Gk21">import React, {useRef} from 'react'
import Player, {PlayerType} from 'som-third-party-lib';

const CustomPlayer: React.FC = () =&gt; {
  const playerRef = useRef&lt;PlayerType&gt;(new Player());

  // We can use non-null assertion here (! sign)
  // because we now that whenever we access this ref
  // its current value will be an instance of 
  // third party player.
  const start = () =&gt; playerRef.current!.play();
  const stop = () =&gt; playerRef.current!.pause();
  
  return (
    &lt;&gt;
      &lt;button onClick={start}&gt;Play!&lt;/button&gt;
      &lt;button onClick={stop}&gt;Pause&lt;/button&gt;
    &lt;/&gt;
  )
}</textarea><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><a href="https://reactjs.org/docs/refs-and-the-dom.html" rel="noopener noreferrer nofollow">React Refs</a></p></li><li><p><code><a href="https://reactjs.org/docs/hooks-reference.html#useref" rel="noopener noreferrer nofollow">useRef</a></code><a href="https://reactjs.org/docs/hooks-reference.html#useref" rel="noopener noreferrer nofollow"> hook</a></p></li><li><p><a href="https://www.typescriptlang.org/docs/handbook/generics.html" rel="noopener noreferrer nofollow">Generics in TypeScript</a></p></li><li><p><a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-and-non-undefined-type-guards" rel="noopener noreferrer nofollow">Non-null assertion</a></p></li></ul><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Use React Refs with TypeScript

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript