Reason behind using refs instead of ID in React JS

Let's start with id attribute in React JS and here we have used id attribute to access one of the elements in a React Component. In this IdComponent component, we are performing the following operations:

• When a user focuses on a text field, it will change the border-color to blue and backgroun-color to light black.
• When a user blurs out of the text field, it will reset the border-color and border-color to initial stage.

IdComponent.js

This is an 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 (
    

); } } export default IdComponent;

style.css

This is the related stylesheet for the same.

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

}
.highlight {
  border: solid 2px #00f;
  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(
  ,
  document.getElementById('root')
);

registerServiceWorker();

Let's see the output for id attribute below and Tap the input field the text field to see the change.

Reusability Problem

You'll encounter a problem, when you are using same component more than once. Here's a demo of reusability issue withid 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, which is a crime as per HTML standards.

NOTE: id attribute works on a single element in whole DOM tree. To overcome this animation issue, always use Ref instead of id's.

Solution is using 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 (
   

); } } export default RefComponent;

style.css

This is the related stylesheet for the same.

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

}
.highlight {
  border: solid 2px #00f;
  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(
  ,
  document.getElementById('root')
);

registerServiceWorker();

Let's see the final output:

So, If you are using id attribute in your application, then change it to ref attribute.

Thanks to Praveen Kumar for being our guest writer this week.

Who Are Ronald James?

We are a leading niche digital & tech recruitment specialist for the North East of England. We Specialise in the acquisition of high-performing technology talent across a variety of IT sectors including Digital & Technology Software Development.

Our ultimate goal is to make a positive impact on every client and candidate we serve - from the initial call and introduction, right up to the final delivery, we want our clients and candidates to feel they have had a beneficial and productive experience.

Contact our Team

If you’re looking to start your journey in sourcing talent or find your dream job, you’ll need a passionate, motivated team of experts to guide you. Check out our Jobs page for open vacancies. If interested, contact us or call 0191 620 0123 for a quick chat with our team.

Let's be Friends!

Follow us on our blog, Facebook, LinkedIn, Twitter or Instagram to follow industry news, events, success stories and new blogs releases.

 

Back to Blog