Different Ways to Create Refs in React

Introduction 

 

While writing React apps we are always following the component-based architecture but there might be a situation where you may have to manipulate or imperatively modify the DOM element. So to accomplished, this React provides something called Refs. In simple terms, refs give access to the underlying DOM element.

 

As per the React documentation below are the best use cases of using refs:

• Managing focus, text selection, or media playback.
• Triggering imperative animations.
• Integrating with third-party DOM libraries. 

Note

Avoid using refs everywhere into the app. If things can be done using a declarative manner don't use refs.

 

In this article, we are going to see the different ways of creating refs in react along with some examples. So let's grab a cup of coffee and start coding.

TL;DR

Source code

 

So today we will be discussing three ways of creating refs in React:

• Callback Refs
• Using React.createRef() API (from React 16.3)
• Using useRef() hook 

Callback Refs

 

As the name implies, in callback refs, we have to provide a callback function to ref props. So the function receives input as a DOM element which we can store in a variable for later use in the application. For example, when a user clicks on the button the input element should have focus. First, I am creating a component along with input and a button.

import React, { Component } from "react";

class CallbackRefExample extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        Callback Ref Example:
        <br />
        <br />
        <input type="text" />
        <button style={{ margin: "8px" }}>Click</button>
      </div>
    );
  }
}

export default CallbackRefExample;

I am dividing this into three steps. First, create a callback function and bind this in the constructor. I have created a callback function called inputElementRef.

import React, { Component } from "react";

class CallbackRefExample extends Component {
  constructor(props) {
    super(props);
    this.inputElementRef = this.inputElementRef.bind(this);
  }

  inputElementRef(inputElement) {
    this.inputRef = inputElement;
  }

  render() {
    return (
      <div>
        Callback Ref Example:
        <br />
        <br />
        <input type="text" />
        <button style={{ margin: "8px" }}>Click</button>
      </div>
    );
  }
}
export default CallbackRefExample;

Second, assess the inputElementRef() function to ref props of an input element

<input type="text" ref={this.inputElementRef}/>

We have now created our callback ref.

 

Third, create on the click handler function to call the focus method using inputRef.

handleClick(){
  this.inputRef.focus();
}

Assign this function to the onClick event of the button.

<button style={{ margin: "8px" }} onClick={this.handleClick} >Click</button>

The final output should look like:

 

 

Using React.createRef() API

 

In 16.3 version of React has introduced a new API called React.createRef() for creating refs. We don't need to create a callback function and assign it to ref props here. So just create a ref and stored it into some variable and assign this variable to the ref prop of the DOM element. So we will take the same example, create a functional component that has one input element and one button.

import React, { Component } from "react";

export default function CallbackRefExample() {
  return (
    <div>
      Callback Ref Example:
      <br />
      <br />
      <input type="text" />
      <button style={{ margin: "8px" }}>Click</button>
    </div>
  );
}

Now create a variable called inputRef and assign it with React.createRef() API.

let inputRef = React.createRef();

Now apply this inputRef to ref props of input element. After that, create onClick handler for a button so that when button onClick event fires, we have to focus the input element.

 

So the final component looks like:

import React, { Component } from "react";

export default function CallbackRefExample() {
  let inputRef = React.createRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      Callback Ref Example:
      <br />
      <br />
      <input type="text" ref={inputRef} />
      <button style={{ margin: "8px" }} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

Here, we will receive the mounted instance of the component in its current property of ref. That's why we have invoked the focus() function.

inputRef.current.focus();

Output

 

 

Using the useRef() hook

 

We can now create a ref using hooks. React provides us inbuilt hook called useRef(). useRef hook is taking an initial value for the ref as input. Similar to React.createRef(), we have to create a variable that can store the ref reference for further use. Here is an example:

 

Output

 

Conclusion

 

In this article, I explained different ways to create Refs in React JS. I also created simple examples using ref. I really hope that you enjoyed this article, please do not hesitate to send me your thoughts or comments on what I could have done better. This article was originally published on my blog.

 

You can follow me on twitter @sumitkharche01

 

Happy Coding!