ReactJS Refs and the DOM

Last modified on: September 7, 2025

<h1 data-start="397" data-end="432">⚛️ <strong data-start="402" data-end="430">ReactJS Refs and the DOM</strong></h1>
<p data-start="434" data-end="653">In React, <strong data-start="444" data-end="452">Refs</strong> provide a way to <strong data-start="470" data-end="522">directly access DOM elements or React components</strong> created in the render method.<br data-start="552" data-end="555" />They are useful when you need to perform actions that are not easily handled via props or state.</p>
<hr data-start="655" data-end="658" />
<h2 data-start="660" data-end="687">🔹 <strong data-start="666" data-end="687">When to Use Refs?</strong></h2>
<ul data-start="688" data-end="828">
<li data-start="688" data-end="742">
<p data-start="690" data-end="742">Managing focus, text selection, or media playback.</p>
</li>
<li data-start="743" data-end="780">
<p data-start="745" data-end="780">Triggering imperative animations.</p>
</li>
<li data-start="781" data-end="828">
<p data-start="783" data-end="828">Integrating with third-party DOM libraries.</p>
</li>
</ul>
<hr data-start="830" data-end="833" />
<h2 data-start="835" data-end="858">🔹 <strong data-start="841" data-end="858">Creating Refs</strong></h2>
<h3 data-start="860" data-end="896">1. <strong data-start="867" data-end="896">Using <code data-start="875" data-end="894">React.createRef()</code></strong></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { Component } from "react";

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

focusInput = () =&gt; {
    this.inputRef.current.focus(); // Directly access DOM element
  };

render() {
    return (
      &lt;div&gt;
        &lt;input type="text" ref={this.inputRef} /&gt;
        &lt;button onClick={this.focusInput}&gt;Focus Input&lt;/button&gt;
      &lt;/div&gt;
    );
  }
}

export default MyComponent;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1376" data-end="1442">✅ Here, <code data-start="1384" data-end="1407">this.inputRef.current</code> refers to the <code data-start="1422" data-end="1431">&lt;input&gt;</code> element.</p>
<hr data-start="1444" data-end="1447" />
<h3 data-start="1449" data-end="1507">2. <strong data-start="1456" data-end="1505">Using <code data-start="1464" data-end="1474">useRef()</code> Hook (Functional Components)</strong></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useRef } from "react";

function MyComponent() {
  const inputRef = useRef(null);

const focusInput = () =&gt; {
    inputRef.current.focus();
  };

return (
    &lt;div&gt;
      &lt;input type="text" ref={inputRef} /&gt;
      &lt;button onClick={focusInput}&gt;Focus Input&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default MyComponent;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1851" data-end="1854" />
<h2 data-start="1856" data-end="1900">🔹 <strong data-start="1862" data-end="1898">Accessing DOM Elements with Refs</strong></h2>
<p data-start="1902" data-end="1932">Example: Scrolling into view</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>function ScrollExample() {
  const divRef = useRef(null);

const scrollToDiv = () =&gt; {
    divRef.current.scrollIntoView({ behavior: "smooth" });
  };

return (
    &lt;div&gt;
      &lt;button onClick={scrollToDiv}&gt;Scroll to Box&lt;/button&gt;
      &lt;div style={{ height: "800px" }}&gt;&lt;/div&gt;
      &lt;div
        ref={divRef}
        style={{ width: "200px", height: "200px", background: "lightblue" }}
      &gt;
        Target Box
      &lt;/div&gt;
    &lt;/div&gt;
  );
}
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2392" data-end="2395" />
<h2 data-start="2397" data-end="2422">🔹 <strong data-start="2403" data-end="2420">Callback Refs</strong></h2>
<p data-start="2423" data-end="2498">Instead of <code data-start="2434" data-end="2445">createRef</code>, you can assign refs with a <strong data-start="2474" data-end="2495">callback function</strong>:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>class MyComponent extends React.Component {
  setRef = (element) =&gt; {
    this.inputElement = element;
  };

focusInput = () =&gt; {
    this.inputElement.focus();
  };

render() {
    return (
      &lt;div&gt;
        &lt;input type="text" ref={this.setRef} /&gt;
        &lt;button onClick={this.focusInput}&gt;Focus Input&lt;/button&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2856" data-end="2859" />
<h2 data-start="2861" data-end="2884">📊 <strong data-start="2867" data-end="2884">Refs vs State</strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="2886" data-end="3158">
<thead data-start="2886" data-end="2923">
<tr data-start="2886" data-end="2923">
<th data-start="2886" data-end="2907" data-col-size="sm">Feature</th>
<th data-start="2907" data-end="2914" data-col-size="sm">Refs</th>
<th data-start="2914" data-end="2923" data-col-size="sm">State</th>
</tr>
</thead>
<tbody data-start="2963" data-end="3158">
<tr data-start="2963" data-end="3025">
<td data-start="2963" data-end="2984" data-col-size="sm">Used For</td>
<td data-start="2984" data-end="3004" data-col-size="sm">Direct DOM access</td>
<td data-start="3004" data-end="3025" data-col-size="sm">UI data rendering</td>
</tr>
<tr data-start="3026" data-end="3063">
<td data-start="3026" data-end="3047" data-col-size="sm">Causes Re-render</td>
<td data-start="3047" data-end="3054" data-col-size="sm">❌ No</td>
<td data-start="3054" data-end="3063" data-col-size="sm">✅ Yes</td>
</tr>
<tr data-start="3064" data-end="3158">
<td data-start="3064" data-end="3085" data-col-size="sm">Common Use Cases</td>
<td data-start="3085" data-end="3121" data-col-size="sm">Focus, animations, 3rd-party libs</td>
<td data-start="3121" data-end="3158" data-col-size="sm">UI updates, conditional rendering</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="3160" data-end="3163" />
<h2 data-start="3165" data-end="3183">✅ <strong data-start="3170" data-end="3181">Summary</strong></h2>
<ul data-start="3184" data-end="3482">
<li data-start="3184" data-end="3245">
<p data-start="3186" data-end="3245">Refs let you <strong data-start="3199" data-end="3242">directly access DOM nodes or components</strong>.</p>
</li>
<li data-start="3246" data-end="3329">
<p data-start="3248" data-end="3329">Use <code data-start="3252" data-end="3271">React.createRef()</code> in class components, <code data-start="3293" data-end="3303">useRef()</code> in function components.</p>
</li>
<li data-start="3330" data-end="3410">
<p data-start="3332" data-end="3410">They are perfect for <strong data-start="3353" data-end="3407">focus management, animations, and DOM manipulation</strong>.</p>
</li>
<li data-start="3411" data-end="3482">
<p data-start="3413" data-end="3482">Avoid overusing refs &ndash; use <strong data-start="3440" data-end="3459">state and props</strong> for most UI updates.</p>
</li>
</ul>

Web Technology View More