Virtual DOM is one of the key features of React library. It is the central feature that allows React to be so fast and efficient. Considering that its speed and efficiency is why React is so popular, you could say that Virtual DOM is one of the features that allows React to dominate front-end development right now.
Contrary to what you might think, all React components actually render virtual DOM. When component re-renders, it is re-rendering the virtual DOM. Behind the scenes, React does its magic to settle differences between virtual and real DOM as efficiently as possible.
You probably know that changes to component’s state or their props trigger the component and all of its children to re-render. This often happens when you access values from text input field in React. At first, this may seem like an inefficient process, but it’s necessary to make sure React apps always stay up to date and display latest changes. Even without users having to refresh the page.
This approach would indeed be inefficient without virtual DOM. Because virtual DOM is just a shadow copy, it’s much lighter to work with, so React can perform re-render operations for entire branches of web application and still keep the process efficient.
Actual rendering of real DOM elements happens after the fact. When React notices that virtual and real DOMs are different, it updates the real DOM to reflect latest changes from the virtual DOM.
Render is a very special method in React. Updating the page to show latest data is only possible thanks to render method. All React components must have a render() method. In case of class components, the method is explicitly defined and returns component layout written in JSX. In case of functional components, the component itself plays the role of render() method and returns JSX code.
By default, the render method has only one return statement to define the component layout. However, this is not always the case. You can call other functions or methods inside the render() method. These will be executed every time the component renders (when it mounts as well as when it updates). Effectively, it’s a way to replicate the way componentDidUpdate lifecycle method or useEffect() hook works.
If you want to perform a side-effect only once, then componentDidMount() or useEffect() without a dependency array is your best bet.
Sometimes you want a button to dynamically change the component’s appearance. Let’s take ‘dark mode’ as an example. Dark mode is a common feature for web apps and one that users love a lot.
In React, the easy way to implement dark mode is to create a state variable (or a property in the state) to hold a boolean value. And use conditional styling or conditional classNames to change the element’s appearance depending on the state value. This article explores string interpolation, a useful feature for dynamic styling in React.
This is less difficult than it sounds. JSX allows you to embed dynamic expressions in the component layout. className, which is React’s way of setting normal class, can have a dynamic class value that is determined by a condition.
For example, if your dark mode status (whether it is turned on or off) is stored in dark state variable (or state property), you can implement a ternary operator that returns className value depending on current value of the state variable.
Let’s look at an example:
Ternary operator checks if the condition (before the question mark) is true. If it is, then ternary operator returns the first value that comes after the question mark. It can be a string, a Boolean, or even an expression. If it is false, then it returns second value after the semicolon. Similarly, you can use any type of value here. Sometimes you might even need to return another ternary operator, to handle multiple scenarios (sort of similar to if/else statements inside JSX).
Embedding dynamic expressions even allows you to render elements and components based on some condition. For example, if a certain state value is true, then render some element or a component. This is often used in conditional collapse / expand feature in React.
In this article, we discussed Virtual DOM its importance for building web applications with React. Understanding Virtual DOM means understanding React, and behind the scenes decisions that make this library work. We also went over important rendering features that developers often use. Conditional rendering, as well as conditional styling are important aspects of web application building with React.