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
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.
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.
For exhibition and sponsorship opportunities, contact Sharon Cordesse at firstname.lastname@example.org
For information on trade opportunities with O'Reilly conferences contact email@example.com
For media-related inquiries, contact Maureen Jennings at firstname.lastname@example.org
View a complete list of OSCON contacts