Where should I create references for DOM elements in Reactjs?

Question

class SearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.searchInputRef = React.createRef(); // 👈️ LOOK HERE 
  }
  onFormSubmit = (e) => {
    e.preventDefault();
    // const query = e.target.querySelector("#searchInput").value;  // 👈️ LOOK HERE
    const query = this.searchInputRef.current.value;
    console.log(query);
  };
  render() {
    return (
      <form onSubmit={this.onFormSubmit}>
        <div className="input-group-text">
          {this.props.label}
          &nbsp;
          <input
            type="text"
            className="form-control"
            id="searchInput"
            aria-describedby="emailHelp"
            placeholder="Search"
            ref={this.searchInputRef}
          />
          &nbsp;
          <button type="submit" className="btn btn-primary">
            <i className="fas fa-search"></i>
          </button>
        </div>
      </form>
    );
  }
}

I'm very new to ReactJS, but I'm having hard times with it, I have two questions about my component above:

• on the first // 👈️ LOOK HERE comment above, you see, I'm saving the references to the class instance itself (in the constructor) which leads to two downsides:

1. The constructor will become very messy later when I add 7 or 8 references inside of it, which makes it non-clean code.
2. We're saving the reference to the object body of the class instance, do you think this is a clean-code? maybe there should be something in React that allows me to store all the references inside one property may be called "refs", so the instance of that class would look like the following:

{
      refs: {
       searchInputRef: ...
       // later
       buttonRef: ...
       button2Ref: ...
       iconRef: ...
      }
state: ...
// the rest of the component object
 }

Which is more cleaner if you ask me. If I'm wrong, please let me know.

• on the second comment // 👈️ LOOK HERE of course you can see I don't actually need a reference in my case, so why I'm using ref sys~? I can simply get the input from e.target.querySelector("#searchInput") as simple as it looks like, why folks are always saying it's a shame and a bad practice to use my beloved querySelector to reference DOM elements when using React?

Answer 1

Well, I think the people you mentioned (those who say using DOM is embarrassing) are completely wrong!

They have probably never read the official ReactJs documents and are merely expressing their personal (and completely wrong) opinion.

Stop Overuse Refs!

According to the documentation on the ReactJs website, overuse of the Refs is completely wrong. ReactJs recommends that you do not even use open() or close() modals.

So the best option we can choose is to use DOM. But this does not mean that ReactJs has put a useless thing in its library facilities. Not at all.

So when to Use Refs?

There are some great cases where using Refs is very economical. For example, to focus on fields or create multiple animations.

In my opinion, there is nothing that Refs can not do. And on the other hand, there is nothing that can not be done with DOM. Both are fully functional.

What matters is the performance and efficiency of each.

DOM is a proven thing in the web world, but according to ReactJs, overuse of Refs can be harmful.

Anyway, this is a general overview of Refs and DOM that I would like to share with you.

I hope other people give you suggestions on how to use Refs better.

Finally, there is another important issue.

I understand from your question that you care a lot about the performance of your program. But I was wondering why you do not use functional components instead of class components? Using functional components can greatly enhance the performance, efficiency and speed of your program. I hope you read about it and improve the performance of your program by migrating to functionals.

Please Read This Articles:

1. Components and Props
2. Introducing Hooks
3. React Function Components

Answer 2

At first // 👈️ LOOK HERE,

You could have a function to create ref, to distinct them i prefer an id.

class SearchInput extends React.Component {
  constructor(props) {
    super(props);
  }
  
  refs = {} // 👈️ LOOK HERE 
  
  getRef(id) { // 👈️ LOOK HERE 
    if (!this.refs.hasOwnProperty(id)) {
        this.refs[id] = React.createRef();
    }
    return this.refs[id];
  }
  

  render() {
    const 
    return (
      <form onSubmit={this.onFormSubmit}>
        <div className="input-group-text">
          {this.props.label}
          &nbsp;
          <input
            type="text"
            className="form-control"
            id="searchInput"
            aria-describedby="emailHelp"
            placeholder="Search"
            ref={this.getRef(id)} // 👈️ LOOK HERE, id - you decide 
          />
          &nbsp;
          <button type="submit" className="btn btn-primary">
            <i className="fas fa-search"></i>
          </button>
        </div>
      </form>
    );
  }
}

At second // 👈️ LOOK HERE, i think this question has been asked you should do a search for it.