How to Access DOM Nodes in React with Refs

In this article you'll learn how to access underlying DOM elements in React. This can be useful in scenarios when there is no alternative React-way to do that. For example, working with 3rd party JavaScript libraries that do not support React directly or accessing DOM APIs that are not available in React, like managing focus, text selection, getting size and position of elements.

By default, React does not provide direct access to underlying DOM elements. There are several reasons for that. The first one is due to 

. During consecutive renders React may reuse existing DOM nodes for performance reasons or create new ones. This means that underlying DOM nodes for a React component may change between renders.

Another reason is that you may have multiple instances of the same React component on a page. When working with DOM elements we use 

 function that returns a DOM element by its id. In React, if we'd want to leverage the 

 property of elements we may end up with multiple HTML elements with the same id. This will cause the 

 function to return the first element with the specified id which will cause errors in our application.

All this means that there should be another way to work with DOM elements in React. And this way is using Refs. Let's take a look at how to create Refs and access an underlying DOM nodes.

Working with refs in React is a two-step process. We start by creating a ref and assigning it to an HTML element:

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
    // this.inputRef.current is null here
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
      </div>
    );
  }
}

 function to create a reference object. It won't contain a link to a DOM element right away though. In the 

 element. These two actions combined will supply us with a working DOM element reference.

Every standard HTML element and every component in React has got the 

 property of a reference created with the 

 function. React will update this property with an actual DOM element after render and before update events. That means that we can access the DOM element in 

 functions. We also can access the DOM element in event handlers.

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
    // this.inputRef.current is null here
  }

  componentDidMount() {
    // we can use this.inputRef.current to access DOM element
  }

  componentDidUpdate() {
    // we can use this.inputRef.current to access DOM element
  }

  handleClick = () => {
    // we can use this.inputRef.current to access DOM element
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.handleClick}>Focus</button>
      </div>
    );
  }
}

In this example, we access the DOM element in a click event handler 

 to set a focus to an input element. We're using the 

 property of an HTML element, we will get the reference to a DOM node. We can also use the 

 property of React components to get a reference to a React component instance. However, this will work only for class components and will not work for functional components. We can use this reference to a React component instance to call the component's methods manually. This is mostly used in advanced scenarios, and is out of scope for this article.

Refs are a great way to work with APIs that are only available for DOM nodes and do not have a React counterpart. While Refs is a very powerful tool, it should always be used with caution. Refs in React work as a last resort when we need to access underlying DOM elements and there are no other React approaches to do that.

If you'd like to learn more about ways to create and use Refs in React, the following articles may help you:

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Access DOM Nodes in React with Refs</h1><div data-node-type="summary" class="summary-block">In this article you'll learn how to access underlying DOM elements in React. This can be useful in scenarios when there is no alternative React-way to do that. For example, working with 3rd party JavaScript libraries that do not support React directly or accessing DOM APIs that are not available in React, like managing focus, text selection, getting size and position of elements.</div><p>By default, React does not provide direct access to underlying DOM elements. There are several reasons for that. The first one is due to <a href="https://reactjs.org/docs/rendering-elements.html#react-only-updates-whats-necessary" rel="noopener noreferrer nofollow">how React's rendering works</a>. During consecutive renders React may reuse existing DOM nodes for performance reasons or create new ones. This means that underlying DOM nodes for a React component may change between renders.</p><p>Another reason is that you may have multiple instances of the same React component on a page. When working with DOM elements we use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById" rel="noopener noreferrer nofollow">document.getElementById()</a> function that returns a DOM element by its id. In React, if we'd want to leverage the <code>id</code> property of elements we may end up with multiple HTML elements with the same id. This will cause the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById" rel="noopener noreferrer nofollow">document.getElementById()</a> function to return the first element with the specified id which will cause errors in our application.</p><p>All this means that there should be another way to work with DOM elements in React. And this way is using Refs. Let's take a look at how to create Refs and access an underlying DOM nodes.</p><h2><a name="creating-a-ref">Creating a Ref</a></h2><p>Working with refs in React is a two-step process. We start by creating a ref and assigning it to an HTML element:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-iiSSe" id="cm-iiSSe">import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
    // this.inputRef.current is null here
  }

  render() {
    return (
      &lt;div&gt;
        &lt;input type="text" ref={this.inputRef} /&gt;
      &lt;/div&gt;
    );
  }
}</textarea><p>In the component's constructor we use <code>React.createRef()</code> function to create a reference object. It won't contain a link to a DOM element right away though. In the <code>render</code> function we pass the created <code>inputRef</code> reference object to the <code>ref</code> property of the <code>input</code> element. These two actions combined will supply us with a working DOM element reference.</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>Every standard HTML element and every component in React has got the <code>ref</code> property available that we can use.</p></div></div><h2><a name="using-a-ref">Using a Ref</a></h2><p>We access a DOM element using the <code>current</code> property of a reference created with the <code>React.createRef()</code> function. React will update this property with an actual DOM element after render and before update events. That means that we can access the DOM element in <code>componentDidMount</code> and <code>componentDidUpdate</code> functions. We also can access the DOM element in event handlers.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-b73CC" id="cm-b73CC">import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
    // this.inputRef.current is null here
  }

  componentDidMount() {
    // we can use this.inputRef.current to access DOM element
  }

  componentDidUpdate() {
    // we can use this.inputRef.current to access DOM element
  }

  handleClick = () =&gt; {
    // we can use this.inputRef.current to access DOM element
    this.inputRef.current.focus();
  };

  render() {
    return (
      &lt;div&gt;
        &lt;input type="text" ref={this.inputRef} /&gt;
        &lt;button onClick={this.handleClick}&gt;Focus&lt;/button&gt;
      &lt;/div&gt;
    );
  }
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fnbwwx&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fnbwwx&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fnbwwx%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example, we access the DOM element in a click event handler <code>handleClick</code> to set a focus to an input element. We're using the <code>this.inputRef.current</code> to access the DOM element and call the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus" rel="noopener noreferrer nofollow">focus()</a> function.</p><h2><a name="using-refs-with-react-components">Using Refs with React components</a></h2><p>When we specify the <code>ref</code> property of an HTML element, we will get the reference to a DOM node. We can also use the <code>ref</code> property of React components to get a reference to a React component instance. However, this will work only for class components and will not work for functional components. We can use this reference to a React component instance to call the component's methods manually. This is mostly used in advanced scenarios, and is out of scope for this article.</p><h2><a name="conclusion">Conclusion</a></h2><p>Refs are a great way to work with APIs that are only available for DOM nodes and do not have a React counterpart. While Refs is a very powerful tool, it should always be used with caution. Refs in React work as a last resort when we need to access underlying DOM elements and there are no other React approaches to do that.</p><h2><a name="more-resources">More Resources</a></h2><p>If you'd like to learn more about ways to create and use Refs in React, the following articles may help you:</p><ul><li><p>How to <a href="https://reactjs.org/docs/refs-and-the-dom.html#callback-refs" rel="noopener noreferrer nofollow">create Refs with a callback function.</a></p></li><li><p>How to <a href="https://reactjs.org/docs/forwarding-refs.html" rel="noopener noreferrer nofollow">organize an access to a child’s DOM node from a parent component.</a></p></li></ul>

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Access DOM Nodes in React with Refs

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript