3 Rendering and the virtual DOM
This chapter covers
- Defining the virtual DOM
- Understanding the problems the virtual DOM solves
- Implementing functions to create virtual DOM nodes
- Defining the concept of a stateless component
As you saw in chapter 2, mixing application and Document Object Model (DOM) manipulation code gets unwieldy quickly. If for every event resulting from the user’s interaction with the application, we have to implement not only the business logic—the one that gives value to the application—but also the code to update the DOM, the codebase becomes a hard-to-maintain mess. We’re mixing two different levels of abstraction: the application logic and the DOM manipulation. What a maintenance nightmare!
Manipulating the DOM results in imperative code —that is, code that describes how to do something step by step. By contrast, declarative code describes what to do without specifying how to do it; those details are implemented somewhere else. Also, manipulating the DOM is a low-level operation—that is, it requires considerable knowledge of the Document API and sits below the application logic. Contrast this operation with higher-level application code, which is framed in a language that is close to the business so that anyone working on the project can—and should—understand.