Why to use refs instead of IDs In React JS

Lets start with ID attribute in react js and here we have used ID attribute to access one of the element in react component. Actually in this IdComponent Component we are performing below operations :

• When user focus on text field, then it will change the border color to Blue and background color to light black.
• When user focus out of the text field, then it will reset the border color and border color to initial stage.

IdComponent.js

This is a IdComponent Component, where we are using ID attribute.

import React from 'react';
import './style.css';

class IdComponent extends React.Component {
  onFocus() {
    document.getElementById("myInput").setAttribute("class", "highlight");
  }

  onBlur() {
    document.getElementById("myInput").setAttribute("class", "");
  }

  render() {
    return (
      <div>
        <input
          id="myInput"
          onFocus={this.onFocus.bind(this)}
          onBlur={this.onBlur.bind(this)}
        />
      </div>
    );
  }
}

export default IdComponent;

style.css

This is a style sheet design.

input {
  padding: 10px;
  border: solid 2px #BDC7D8;
  display: block;
  width: 500px;
  margin-top:10px;

}
.highlight {
  border: solid 2px #0000FF;
  background-color:#e5e5e5;
}

index.js
This helps to render the IdComponent Component into a root DOM node.

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import IdComponent from './demoOnRefAndID/IdComponent';


ReactDOM.render(<IdComponent /> , document.getElementById('root'));

registerServiceWorker();

Lets see the output for ID attribute below and Tap the input field the text field to see the change.

The Reusability Problem

The problem you'll encounter , when you are using same component more than once. Here's a demo of re-usability issue with ID attribute, when you try to create that same component multiple times. Tap through the input fields to see what happens. Here we have created multiple objects with the same ID.

NOTE : ID’s attribute works on a single element in whole DOM tree.

To overcome this animation issue, always use Ref instead of IDs

Solution is Ref

This component using Ref attribute to overcome above issue.

RefComponent.js

This is a RefComponent Component, where we are using Ref attribute.

import React from 'react';
import './style.css';

class RefComponent extends React.Component {
  onFocus() {
    this.myInput.setAttribute("class", "highlight");
  }

  onBlur() {
    this.myInput.setAttribute("class", "");
  }

  render() {
    return (
      <div>
        <input
          ref={input => {
            this.myInput = input;
          }}
          onFocus={this.onFocus.bind(this)}
          onBlur={this.onBlur.bind(this)}
        />
      </div>
    );
  }
}


export default RefComponent;

style.css
This is a style sheet design.

input {
  padding: 10px;
  border: solid 2px #BDC7D8;
  display: block;
  width: 500px;
  margin-top:10px;

}
.highlight {
  border: solid 2px #0000FF;
  background-color:#e5e5e5;
}

index.js
This helps to render the RefComponent Component into a root DOM node.

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import RefComponent from './demoOnRefAndID/RefComponent';


ReactDOM.render(<React.Fragment><RefComponent/><RefComponent/><RefComponent/></React.Fragment> , document.getElementById('root'));

registerServiceWorker();

lets see the final output:

So, If you are using ID attribute in your application, then change it to Ref attribute.