document.getElementById() is a commonly used method to access and manipulate DOM elements in JavaScript. React is a JavaScript-based library, but developers can not use document.getElementById() to access DOM elements in React.
In this article, we will explore the right way to perform this task.
Specific Examples
Get element by id in React
Web developers use getElementById() to store DOM elements in a variable.
In React, you need refs to do the same – reference elements in your JavaScript code.
Let’s look at an example where we use a ref to store a reference to a specific DOM element in React.
First, you need to import the useRef() hook from React library.
Next, create a variable and set it equal to a call to useRef() hook, which returns an empty ref. Argument to the useRef() hook will set the initial value for the ref. Most of the time, it’s best to set it to null.
Finally, set the ref attribute of the element you want to get in React. Set the ref attribute to a variable that contains the empty ref. Now that variable holds a reference to the element with the ref attribute.
This is how you replicate document get element by id method in React.
In plain JavaScript, you set a variable to the result of getElementById() method. If there are elements with specified ID, then the variable stores a reference to that element.
With refs, you create a variable and set it equal to an empty ref instance returned by useRef() hook. Then you find an element and set its ref to the variable that contains an empty ref. From now, that ref will contain a reference to a DOM element in React.
To be more specific, ref is an object with one property – current, which actually contains a DOM element value.
If you want to select the element and not the object, you need to access the value of ref.current property. It’s best to do this in a useEffect() hook that runs when the component mounts. This ensures that your application waits for the element to be rendered before trying to store it in a ref.
Use getElementById() method in React
We have already mentioned that it’s best to not use getElementById() in React. However, there are instances where it’s justified to use document.getElementById(). For example, when you can not access the element in JSX, so you can not set its ref attribute.
In this case, you should perform this side-effect in a useEffect() hook, so the method runs after the component mounts. getElementById() only serves its purpose if it runs after all components and elements are rendered.
Calling this method outside of useEffect() will often return NULL because it can not find any elements with that ID.
refs vs document.getElementById() in React
React developers can use refs and getElementById() to work with DOM elements in JavaScript code. However, it’s almost always better to use a ref over getElementById() in React.
As you may know, React uses virtual DOM. Using a ref is more consistent with React ecosystem than using a plain JavaScript approach. In my opinion, using a ref is also more readable and simpler approach.
React docs also warn developers to use refs conservatively.
get element in an event handler in React
Event handlers occur after all elements are rendered. This means that you can use document.getElementById() in event handlers in React.
Arguably, it’s much easier to create a variable set to a ref instance, associate it with a DOM element and then use variable throughout your app.