Why not to use document.querySelector()

[Josehower]

After researching a bit seems to be no official source about why it's not advisable to use document.querySelector() in React.

It seems to be a consensus in the React community about using DOM manipulation methods such as querySelector or getElementById is not the best practice but still in my day to day job as coding teacher I would have an official position on this topic.

Would be possible if you to add some documentation about this, or point me to an authoritative link that I can trust in this regard.

I am looking for an official word from a React team member (or former team member) on why usage of these DOM manipulation methods should be avoided. For example, why are refs recommended (and what can go wrong)? Also, what other types of patterns can be used instead (eg. using state to track variables instead of querying for data in the DOM).

If the project is open to this, I would also be open to creating a pull request to add this official answer to the React documentation.

Thank you in advance for any help.

Good energy 👍👍👍👍

[tahseenio]

For most cases various react hooks are easier and more efficient to use than querySelector.

For example if you want to click a button and it opens menu you can target the class of the button using querySelector and add an additional class that opens a a menu. In react however you could use onClick and useState to complete this.

Another example is if you want to change the innertext of a div, you can select it using querySelector and change innertext that way. However you can use the useRef hook and change innertext that way.

Hope that helps!

[gaearon]

I wouldn't say it's necessarily "not recommended" but it's just easy to do wrong.

There are two kinds of selectors you'd probably want to use most often — ID and class selectors.

The problem with ID selectors is they have to be unique. If you render <button id="my-button"> in a <Form /> component, and then later somebody renders two <Form /> components on the page, the logic will no longer work (because you'll "find" the wrong button).

The problem with class selectors is that they're fragile. Someone might rename add/remove a class without realizing that a piece of code searches for it. It's also tempting to use class selectors to find DOM nodes in other components — which is incredibly fragile because now you can't edit a component without worrying that this will break some code above it.

Refs solve all of these problems because they are local to a component and are explicit. You always see that there is a ref to some element, and you can trace where it's passed from to see how it's used.