Using Refs in React

Every now and again, you may find yourself needing or wanting to use Vanilla JavaScript type of functionality when working with React. What do I mean by this? Say for example you want to place a focus on an input element within a React application. In Vanilla JavaScript, you would use the traditional browser DOM manipulation method like:

document.querySelector('input');

However, this approach is not ideal when working with React and is considered bad practice because this method of selecting an element works on the entire, global DOM and is not aware of the input elements or local component rendered by React.

And so, React offers what’s called Refs or References. Refs is a special built-in React feature that allow you to assign a “ref” property to elements within a component to help target those elements with the property. There are a couple of ways to execute refs within React, the first way is:

<input
   type=“text”
   onChange={someFunc}
   value={someStateValue}
   ref={(inputElement) => inputElement.focus()} />

In this example, the ref property is placed on the input element and passed an anonymous function which receives, as an argument, the input element and then the focus method is called on it. Although this approach works, it only allows use of the reference to that element in that particular situation where the input element will be rendered and focused immediately.

Another approach that would allow for the same focusing on that specific input element on render but also manipulating that element from other parts of the application:

<input
   type=“text”
   onChange={someFunc}
   value={someStateValue}
   ref={(inputElement) => this.inputElement = inputElement} />

In this example, the element that is referenced is assigned to a class property “this.inputElement” which can then be used anywhere within the application like:

componentDidMount() {
  this.inputElement.focus( );
}
* achieves the same effect as example 1.

Alternatively, a modern approach to refs is setting up the reference to the element within the constructor method using the createRef method:

constructor(props) {
  super(props);
  this.inputElement = React.createRef();
}
componentDidMount() {
  this.inputElement.current.focus();
}

render() {
  return (
    <input
  type=“text”
  onChange={someFunc}
  value={someStateValue}
  ref={this.inputElement} />
  );
}

In this example, after establishing that “this.inputElement” will reference some input element, you then specify which element by passing that property “this.inputElement” to the ref property on the input element. Afterwards, you can then focus on the element as shown in componentDidMount.

this.inputElement.current.focus();

In this case, when using createRef( ) the element being referenced is stored within the “current” object.

Also something to note, createRef( ) can only be used with class-based components. For functional components, the useRef( ) hook is used instead. And that’s as simple as:

const inputElement = useRef(null);
useEffect( ( ) => inputElement.focus( ));
return (
  <input
    ref={inputElement} />
);

Finally, in this example, the “useRef” function is stored in a variable and it’s then passed the specific element via the ref property, which will become the referenced element. It will then be focused once the useEffect hook executes after the component renders.

These were some ways to use refs within React. They are really great for when you want to do some sort of text selection, focusing on an element, or even animation and more. So whenever you find yourself tempted to do a quick and dirty query selection, I recommend implementing these approaches instead. You can also read more on refs using the React documentations at the link below.

https://reactjs.org/docs/refs-and-the-dom.html