A Semantics for the Essence of React

Magnus Madsen, Ondrej Lhoták, Frank Tip

Research output: Contribution to book/anthology/report/proceedingArticle in proceedingsResearchpeer-review

Abstract

Traditionally, web applications have been written as HTML pages with embedded JavaScript code that implements dynamic and interactive features by manipulating the Document Object Model (DOM) through a low-level browser API. However, this unprincipled approach leads to code that is brittle, difficult to understand, non-modular, and does not facilitate incremental update of user-interfaces in response to state changes. React is a popular framework for constructing web applications that aims to overcome these problems. React applications are written in a declarative and object-oriented style, and consist of components that are organized in a tree structure. Each component has a set of properties representing input parameters, a state consisting of values that may vary over time, and a render method that declaratively specifies the subcomponents of the component. React’s concept of reconciliation determines the impact of state changes and updates the user-interface incrementally by selective mounting and unmounting of subcomponents. At designated points, the React framework invokes lifecycle hooks that enable programmers to perform actions outside the framework such as acquiring and releasing resources needed by a component. These mechanisms exhibit considerable complexity, but, to our knowledge, no formal specification of React’s semantics exists. This paper presents a small-step operational semantics that captures the essence of React, as a first step towards a long-term goal of developing automatic tools for program understanding, automatic testing, and bug finding for React web applications. To demonstrate that key operations such as mounting, unmounting, and reconciliation terminate, we define the notion of a well-behaved component and prove that well-behavedness is preserved by these operations.

Original languageEnglish
Title of host publication34th European Conference on Object-Oriented Programming (ECOOP 2020)
EditorsRobert Hirschfeld, Tobias Pape
Volume166
Place of publicationDagstuhl
PublisherSchloss Dagstuhl--Leibniz-Zentrum für Informatik
Publication date2020
Pages12:1-12:26
Article number12
ISBN (Print)978-3-95977-154-2
ISBN (Electronic)9783959771542
DOIs
Publication statusPublished - 2020
Event34th European Conference on Object-Oriented Programming (ECOOP 2020) - Online
Duration: 15 Nov 202017 Nov 2020
Conference number: 34

Conference

Conference34th European Conference on Object-Oriented Programming (ECOOP 2020)
Number34
CityOnline
Period15/11/202017/11/2020
SeriesLeibniz International Proceedings in Informatics, LIPIcs
Volume166
ISSN1868-8969

Keywords

  • JavaScript
  • Lifecycle
  • Operational semantics
  • React
  • Reconciliation

Fingerprint

Dive into the research topics of 'A Semantics for the Essence of React'. Together they form a unique fingerprint.

Cite this