This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.
Nowadays users expect sleek, performant web applications that behave more and more like native apps.
Techniques have been devised to decrease the waiting time when a website gets downloaded on a user’s first visit. However, in web applications that expose a lot of interactivity, the time elapsing between a user action taking place and the app’s response is also important. Native apps feel snappy, and web apps are expected to behave the same, even on less than ideal internet connections.
In this article I’m going to talk about what React JS is good at and what makes it work, which should provide you with some context to help you decide if this library could be a good fit for your next project.
What Is React JS?
It’s an open source project which to date rakes in well over 67,000 stars on GitHub.
React JS is:
- Declarative — which means that you only need to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes
- Component-Based — you create your React-powered apps by assembling a number of encapsulated components, each managing its own state
- Learn Once, Write Anywhere — React is not a full-blown framework, it’s just a library for rendering views.
How Does the Virtual DOM Work?
The Virtual DOM is at the core of what makes React fast at rendering user interface elements and their changes. Let’s look closer into its mechanism.
The HTML Document Object Model or DOM is a
…programming interface for HTML and XML documents. … The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Essentially, it connects web pages to scripts or programming languages.
Whenever you want to change any part of a web page programmatically, you need to modify the DOM. Depending on the complexity and size of the document, traversing the DOM and updating it could take longer than users might be prepared to accept, especially if you take into account the work browsers need to do when something in the DOM changes. In fact, every time the DOM gets updated, browsers need to recalculate the CSS and carry out layout and repaint operations on the web page.
React JS makes possible for developers to make changes to the web page without having to deal directly with the DOM. This is done via the Virtual DOM.
The Virtual DOM is a lightweight, abstract model of the DOM. React uses the render() method to create a node tree from React components and updates this tree in response to changes in the data model resulting from actions.
Each time there are changes to the underlying data in a React app, React creates a new Virtual DOM representation of the user interface.