I barely used refs in my about 5 years with ReactJS. I knew that it has been used to do some native Javascript actions, like ‘focus’, ‘scrolling’, ‘text selection’, etc. It's a bit like jQuery way to manipulate the DOM. Isn't it?&nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1452915858640-325b467fe554?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExODA5M30"><figcaption>Photo By: <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@shivelycreative?utm_source=unsplash-chrome-extension&amp;utm_medium=referral">Nathan Shively</a></figcaption></figure>But one day, I saw the error shown on my console of my React App, like this:<blockquote>Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</blockquote>Then I started learning it. Before we get into this issue, let's learn some basic concepts first. Note that in this article, we use new React API, like <code>createRef(),</code> <code>useRef()</code>, <code>forwardRef()</code>, etc. so if you are still using old API, i.e. string refs, then you may upgrade it, because,<blockquote>We advise against it because string refs have <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/react/pull/8333#issuecomment-271648615">some issues</a>, are considered legacy, and are likely to be removed in one of the future releases.</blockquote>See All Examples used in this article at Codepen: <a target="_blank" rel="noopener noreferrer" href="https://codepen.io/collection/AOaQkG">https://codepen.io/collection/AOaQkG</a><h3>Example 1 - Ref Focus in Class Component</h3><pre><code class="language-javascript">class Ref extends React.Component {
 constructor(props) {
 super(props);
 this.firstNameRef = React.createRef();
 this.lastNameRef = React.createRef();
 }

 componentDidMount() {
 this.firstNameRef.current.focus();
 }

 handleKeyDown = (e) =&gt; {
 if (e.key === "Enter") {
 this.lastNameRef.current.focus();
 }
 };

 render() {
 return (
 &lt;Layout&gt;
 &lt;Form&gt;
 &lt;Form.Field&gt;
 &lt;label&gt;First Name&lt;/label&gt;
 &lt;input
 placeholder="First Name"
 ref={this.firstNameRef}
 onKeyDown={this.handleKeyDown}
 /&gt;
 &lt;/Form.Field&gt;
 &lt;Form.Field&gt;
 &lt;label&gt;Last Name&lt;/label&gt;
 &lt;input placeholder="Last Name" ref={this.lastNameRef} /&gt;
 &lt;/Form.Field&gt;
 &lt;/Form&gt;
 &lt;/Layout&gt;
 );
 }
}</code></pre>We create Refs in Constructor and assign it to the input fields, then we can access the DOM element by using, for example, this.firstNameRef.current, then focus it.&nbsp;Demo1: <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ref/class-ref-focus">https://deniapps.com/playground/ref/class-ref-focus</a><h3>Example 2 - Ref Focus in Functional Component</h3><pre><code class="language-javascript">const UseRef = () =&gt; {
 const firstNameRef = useRef();
 const lastNameRef = useRef();

 useEffect(() =&gt; {
 firstNameRef.current.focus();
 // document.getElementById("dnx-input").focus();
 }, []);

 const handleKeyDown = (e) =&gt; {
 if (e.key === "Enter") {
 lastNameRef.current.focus();
 }
 };

 return (
 &lt;Layout&gt;
 &lt;Form&gt;
 &lt;Form.Field&gt;
 &lt;label&gt;First Name&lt;/label&gt;
 &lt;input
 placeholder="First Name"
 ref={firstNameRef}
 onKeyDown={handleKeyDown}
 /&gt;
 &lt;/Form.Field&gt;
 &lt;Form.Field&gt;
 &lt;label&gt;Last Name&lt;/label&gt;
 &lt;input placeholder="Last Name" ref={lastNameRef} /&gt;
 &lt;/Form.Field&gt;
 &lt;/Form&gt;
 &lt;/Layout&gt;
 );</code></pre>Since it's a functional component, we use <code>useRef()</code> instead of <code>createRef()</code>, other than that, both components are pretty much identical.Demo2: <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ref/functional-ref-focus">https://deniapps.com/playground/ref/functional-ref-focus</a><h3>Example 3 - Use Ref to Change Value - (DON'T DO THIS)</h3><pre><code class="language-javascript">class Ref extends React.Component {
 constructor(props) {
 super(props);
 this.yourRef = React.createRef();
 }

 componentDidMount() {
 this.yourRef.current.focus();
 }

 incremenetInput = () =&gt; {
 this.yourRef.current.value++;
 };

 render() {
 return (
 &lt;Layout&gt;
 &lt;Form&gt;
 &lt;Form.Field&gt;
 &lt;label&gt;Just a number&lt;/label&gt;
 &lt;input
 placeholder="Enter Value"
 ref={this.yourRef}
 onKeyDown={this.handleKeyDown}
 /&gt;
 &lt;/Form.Field&gt;
 &lt;Button onClick={this.incremenetInput}&gt;Increase Value&lt;/Button&gt;
 &lt;/Form&gt;
 &lt;/Layout&gt;
 );
 }
}</code></pre>So, yes, we could change the value of the DOM element using Ref - back to the age of jQuery! But, we should avoid using refs for anything that can be done declaratively.Demo3: <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ref/class-ref-change-value">https://deniapps.com/playground/ref/class-ref-change-value</a><h3>Example 4 - Forward Ref Using React.forwardRef</h3><pre><code class="language-javascript">//Child Component
const ChildInput = React.forwardRef((props, ref) =&gt; {
 return &lt;input {...props} ref={ref} /&gt;;
});

//Parent Component
const FunctionalForwardRef = () =&gt; {
 const childRef = useRef();

 const handleClick = () =&gt; {
 childRef.current.focus();
 };

 return (
 &lt;Layout&gt;
 &lt;Header as="h3"&gt;Ref Forward Demo&lt;/Header&gt;
 &lt;ChildInput type="text" ref={childRef} /&gt;
 &lt;Button onClick={handleClick}&gt;Focus Child Input&lt;/Button&gt;
 &lt;/Layout&gt;
 );
};</code></pre>Forwarding Ref means forward the ref from the parent component to the child component, so we can control the DOM element in the child component from the parent component. &nbsp;But the ‘ref’ is a reserved word in React JSX, &nbsp;we cannot use it as a prop, which means we cannot pass thru <code>ref</code> using <code>props.ref</code>, so we should call <code>React.forwardRef</code> to pass thru ref. - Again, props, key, ref are three reserved words.&nbsp;Demo4: <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ref/forward-ref">https://deniapps.com/playground/ref/forward-ref</a><h3>Example 5 - Forward Ref Using Custom Prop</h3><pre><code class="language-javascript">//Child Component
const ChildInput = (props) =&gt; {
 return &lt;input ref={props.forwardedRef} /&gt;;
});

//Parent Component
const FunctionalForwardRef = () =&gt; {
 const childRef = useRef();

 const handleClick = () =&gt; {
 childRef.current.focus();
 };

 return (
 &lt;Layout&gt;
 &lt;Header as="h3"&gt;Ref Forward Demo&lt;/Header&gt;
 &lt;ChildInput type="text" forwardedRef={childRef} /&gt;
 &lt;Button onClick={handleClick}&gt;Focus Child Input&lt;/Button&gt;
 &lt;/Layout&gt;
 );
};</code></pre>Actually, we could use Custom Prop to save Ref like other props,<code> forwardedRef={childRef}</code>, Noted that forwardedRef is a custom name, and you can name it everything meaningful as long as it's not a reserved word.&nbsp;Cool, this is much simpler, why bother to use <code>React.forwardRef()</code>? One benefit is that by using <code>React.forwardRef()</code>, we separate the props and ref, then we could pass the props, using<code> {…props}</code>.Demo5: <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ref/functional-forward-ref">https://deniapps.com/playground/ref/functional-forward-ref</a><h3>Forward Ref Warning</h3>Now let's back the issue we see in the browser console as mentioned at the beginning of the article. See the example below:<pre><code class="language-plaintext">//Child Component - without passing thru the ref causes the warning
const ChildInput = (props) =&gt; {
 return &lt;input {...props} /&gt;;
});

//Parent Component
const FunctionalForwardRef = () =&gt; {
 const childRef = useRef();

 const handleClick = () =&gt; {
 childRef.current.focus();
 };

 return (
 &lt;Layout&gt;
 &lt;Header as="h3"&gt;Ref Forward Demo&lt;/Header&gt;
 &lt;ChildInput type="text" ref={childRef} /&gt;
 &lt;Button onClick={handleClick}&gt;Focus Child Input&lt;/Button&gt;
 &lt;/Layout&gt;
 );
};</code></pre>Since we did not pass thru the ref in this example, the React throws the warnings:<blockquote>Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</blockquote><h3>Last Thing</h3>As we learned in Example 3, we could use Ref to change the DOM element's value, although we don't recommend to do this, if we really really want to do it, then we should be aware that we cannot use Ref to change the value of &nbsp;the controlled component, for example, if we use semantic-ui-react to render input, like this:<pre><code class="language-javascript">import { Input, Button } from "semantic-ui-react";
incremenetInput = () =&gt; {
 this.yourRef.current.value++;
};
....
&lt;Input type="text" ref={this.yourRef} defaultValue="0" /&gt;
&lt;Button onClick={this.incremenetInput}&gt;Increment Input Value&lt;/Button&gt;</code></pre>We would not be able to update the value of &lt;Input&gt;. That's because the Input is an object, like this:<pre><code class="language-plaintext">Input {props: {…}, context: {…}, refs: {…}, updater: {…}, inputRef: {…}, …}
computeIcon: ƒ ()
computeTabIndex: ƒ ()
context: {}
focus: ƒ ()
handleChange: ƒ (e)
handleChildOverrides: ƒ (child, defaultProps)
inputRef: {current: input}
partitionProps: ƒ ()
props: {type: "text", defaultValue: "0"}
refs: {}
select: ƒ ()
state: null
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
value: "10"</code></pre>It's a controlled component, the value of the input is in <code>props</code> not in <code>ref.current</code>.See All Examples used in this article at Codepen: <a target="_blank" rel="noopener noreferrer" href="https://codepen.io/collection/AOaQkG">https://codepen.io/collection/AOaQkG</a>That's it - happy Refing :-)<h3>Bonus Example (3/26/2021)</h3>I saw a question at <a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/questions/66825751">S0</a> asking how to pass ‘Ref’ to {Children}. This is pretty tricky, because {Children} is a Prop, to pass Ref, we basically need to pass Prop to {Children}. &nbsp;After some research, I figured out the solution by using React's Context.<pre><code class="language-javascript" id="ik-qZzw5C">const MyContext = React.createContext();

function Widget(props) {
 const myRef = useRef(null);
 useEffect(() =&gt; {
 myRef.current.focus();
 });
 return (
 &lt;MyContext.Provider value={myRef}&gt;{props.children}&lt;/MyContext.Provider&gt;
 );
}

function Example() {
 return (
 &lt;Widget&gt;
 &lt;MyContext.Consumer&gt;
 {(forwardedRef) =&gt; &lt;input type="text" ref={forwardedRef} /&gt;}
 &lt;/MyContext.Consumer&gt;
 &lt;/Widget&gt;
 );
}</code></pre>Check out the demo at <a target="_blank" rel="noopener noreferrer" href="https://codesandbox.io/s/prod-voice-mkrcp">CodeSandbox</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

You may find out React Refs is confusing like I did. In this article, we use real examples to explain what Ref is, how to use it to do focus, and how to do forwarding Ref, etc. We will cover the Ref usages in both Class component and Functional Component.

All Posts In React Context