Skip to main content

React's Architecture

Christopher Chedeau (Facebook)
Average rating: ***..
(3.67, 3 ratings)

React is a JavaScript library for building user interfaces developed by Facebook and Instagram. It has a novel rendering architecture that we’re going to explore in this talk.

An application rendering architecture has two main components: a data source and a display. The art of writing applications is to update the display whenever the data changes. React’s core idea is to conceptually re-generate from scratch the display every time any data changes.

To make this tractable, the application logic is generating an intermediate representation of the display called Virtual DOM. React looks at the previous version and the next to generate the minimum list of modifications to apply to the real DOM.

Two heuristics are used to make the tree-diffing algorithm run in linear time. Two components of the same class will generate similar trees and two components of different classes will generate different trees. It is possible to provide a unique key for elements that is stable across different renders.

See this article for the exact algorithm

Rendering the entire page on every update seem very performance-intensive but in reality there is only in the order of hundreds to thousand nodes in a single screen. This is something that JavaScript in todays browsers can achieve in the order of milliseconds to hundreds of milliseconds.

Hundreds of milliseconds is not good enough though, but fortunately this is the worst-case scenario and not the common case. A React app has the shape of a tree of components. When an update happens, it usually only affects a sub-tree. React will only re-render this sub-tree and not the entire page.

When updating a large tree, usually only a handful of nodes have actually changed but React will re-render everything. But it provides a hook for the developer to tell if a component, based on the previous properties and the new ones, has changed. If it hasn’t changed, React won’t go further.

This gives a clear path to optimizing your application, which doesn’t involve important refactors or using a completely different API.

See this article for a more in-depth explanation

A React application is a tree of components that each only know how to re-render itself. Not only this makes writing your application easier but also have very good performance characteristics.

Photo of Christopher Chedeau

Christopher Chedeau

Facebook

Christopher “vjeux” Chedeau is a Front-End Engineer at Facebook. He is passionate about the web and its ability to very easily write great user interfaces.