How to access DOM elements in React

#react #webdev

If you know basics of React, you’ve probably heard of Virtual DOM – one of the foundational features in React. The name might lead you to believe that it’s like normal DOM, but nothing could be further from the truth.

What is virtual DOM?

Virtual DOM is feature of React that allows you to build very fast and reactive applications. The idea behind React is to immediately show changes in the application. For example – if there’s a new notification on Facebook, show the updated number of notifications even if user hasn’t refreshed the page.

React apps are made up of components that contain DOM elements. React needs some way to keep track of data changes and update the DOM accordingly. That is why components re-render when important data changes (state or props). But to re-rendering the actual DOM element would be too expensive. That’s why React needs virtual DOM, which is a shallow copy of Real DOM. Still, it is much less resource intensive to re-render. This is how React manages to ensure that React apps always reflect the most recent changes in data.

Why would you want to access DOM elements?

In React, it’s typically not necessary to directly manipulate DOM. The library itself provides all the necessary features to access elements, set styles and modify contents of elements.

If you still need to access DOM elements directly, React has one solution – refs. You can use refs to store element references in a variable and work with that variable.

Refs use cases in React

UI features like scroll to bottom requires you to create and manage refs, similar to how you’d use getElementById method in React. You would have to get a reference to an element, so you can call scrollIntoView to skip directly to that element. You can also implement it in the lifecycle methods, so the page automatically skips to a certain part of the page when the application loads.
Sometimes you also need to access ref to manage element’s current state – whether it is focused or not. Refs are commonly used for animations as well.

You can also use refs to log element to the console. This will be helpful in understanding difference between React elements and HTML elements. There’s a pretty big difference, because despite similar syntax, all elements in JSX are actually JavaScript objects.

How to create a ref?

For starters, you need to decide whether you are going to use functional or class components. The former are simpler to write, and allow you to implement features that were previously exclusive to class components. For example, thanks to refs, now you can create and manage state in functional components.

Speaking of hooks, you need a useRef hook to create a ref in React. You need to import it, and then create a variable and set it equal to useRef() hook, which returns instance of an empty ref. Then you can associate with a DOM element in the structure of your app. To do this, you need to set the ref attribute to a variable that holds an empty ref. Don’t forget to use curly braces, otherwise React is not going to know that you are setting the attribute to a JavaScript expression.

You need to initialize a ref to a null value. You can do that by passing null as the argument to the useRef hook.

Why not use getElementById in React?

The problem is that all changes need to be reflected on screen. And using the getElementById method bypasses virtual DOM, which might mean inconsistencies in data rendered on the screen. So it’s best to work within framework of React.

How to get input value in React?

You might’ve used getElementById to access input elements and then get value from them. It works differently in React. Every event handler receives an argument – instance of SyntheticEvent. This is an object that contains information about the event, as well as the element that triggered the event. One of the important values is stored on event.target.value, which contains information like current value entered into input field in React. Follow this tutorial from SimpleFrontEnd to create two way binding in React to manage input values and avoid errors.

What are React elements?

If you look at React code, you will notice that a lot of it looks like HTML. So you might assume that we write HTML inside JavaScript. But don’t be confused. That code is not HTML, it is JSX. Two look alike, but there are very important differences between HTML and JSX.

For one, JSX elements are not actually React elements. JSX is only a simple syntax for developing complex apps in React. Then it is compiled to JavaScript, and ultimately React internally translates everything into a real webpage with JavaScript, CSS and HTML.
React elements are not HTML elements but JavaScript copies to represent features of elements we know and love.

Because everything is JavaScript, you have more freedom to implement dynamic features in React than in HTML. For instance, you can add variable in a className in React.

Partly this is why getElementById() does not work in React. Because in React apps you have an elaborate description of what the page needs to look like. But you don’t have HTML elements yet. That happens after JSX is compiled and React builds an actual page with HTML.

Can you build apps without selecting DOM elements?

Absolutely. In this article we’ve seen that React offers many internal solutions to problems that require getElementById method without React. You can access input elements via SyntheticElement, and create refs if you do need to programmatically alter elements in one way or another. You don’t ever need to use getElementById in React.