What is the equivalent of document.querySelector in React

avatar
Borislav Hadzhiev

Last updated: Apr 7, 2024
3 min

banner

# Table of Contents

  1. What is the equivalent of document.querySelector in React
  2. Using document.querySelector in React.js

# What is the equivalent of document.querySelector in React

The equivalent of the document.querySelector() method in React is using refs.

To select an element, set the ref prop on it to the return value of calling the useRef() hook and access the dom element using the current property on the ref, e.g. ref.current.

App.js
import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(null); useEffect(() => { // 👇️ Use a ref (best) const element2 = ref.current; console.log(element2); // 👇️ Use document.querySelector() // should only be used when you can't set a ref prop on the element // (you don't have access to the element) const element = document.querySelector('#container'); console.log(element); }, []); return ( <div> <div ref={ref} id="container"> <h2>bobbyhadz.com</h2> </div> </div> ); }

react document queryselector equivalent

The code for this article is available on GitHub

The useRef() hook can be passed an initial value as an argument.

App.js
const ref = useRef(null);

The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Notice that we have to access the current property on the ref object to get access to the div element on which we set the ref prop.
App.js
useEffect(() => { const element2 = ref.current; console.log(element2); }, []);

When we pass a ref prop to an element, e.g. <div ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

App.js
<div ref={ref} id="container"> <h2>bobbyhadz.com</h2> </div>

We passed an empty dependencies array to the useEffect hook, so it's only going to run when the component mounts.

App.js
useEffect(() => { const element2 = ref.current; console.log(element2); }, []);
We used the useEffect hook because we want to make sure the ref has been set on the element and the element has been rendered to the DOM.

Note that you don't have to set an id on the element when accessing it using a ref.

Here is a minimal example of using a ref in React.

App.js
import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(null); useEffect(() => { const element = ref.current; console.log(element); }, []); return ( <div> <div ref={ref}> <h2>bobbyhadz.com</h2> </div> </div> ); }

react document queryselector ref

The code for this article is available on GitHub

# Using document.querySelector in React.js

If you don't have access to the element you are trying to select in your component and can't simply set the ref prop on it, use the document.querySelector method.

App.js
import {useEffect} from 'react'; export default function App() { useEffect(() => { const element = document.querySelector('#container'); console.log(element); }, []); return ( <div> <div id="container"> <h2>bobbyhadz.com</h2> </div> </div> ); }

react using document queryselector

The code for this article is available on GitHub

You have to call the document.querySelector() method in the useEffect hook or when an event occurs.

App.js
useEffect(() => { const element = document.querySelector('#container'); console.log(element); }, []);

For example, you can safely access the current property of a ref in an onClick event handler because the element will be present in the DOM when the event is triggered.

If you try to access an element via document.querySelector or a ref directly in the render method of your function component, the element might not have been rendered yet.

The useEffect hook runs after the DOM elements in the component have been rendered to the DOM, so if an element with the provided id exists, it will be selected.

Here is an example of using the document.querySelector method when an event occurs.

App.js
export default function App() { const handleClick = event => { const element = document.querySelector('#container'); console.log(element); }; return ( <div> <div id="container"> <h2>bobbyhadz.com</h2> </div> <button onClick={handleClick}>Click</button> </div> ); }

react document queryselector on event

The code for this article is available on GitHub

We set the onClick prop on a button element, so every time the button is clicked, its handleClick function is invoked.

We used the document.querySelector method in the handleClick function to select a different element.

Make sure to not try to use the document.querySelector method too early, e.g. in your component's render method because the element you're trying to select might not have been rendered yet.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.