React state can be expressed with standard programming references
On the Expressive Power of Hook-Indexed State Comprehending State in the React UI Library
Programming Languages
Summary
React is a popular tool used to build websites, which lets parts of the page remember information using something called hooks. However, these hooks can sometimes behave in confusing ways. The authors created a simpler math model to understand how React hooks work and showed that these hooks can actually be recreated using standard programming ideas called references. This finding helps explain how React manages information and could guide future website-building tools.
What this means in practice
- •For frontend developers: Build more predictable React components by understanding state management equivalences.
- •For programming language designers: Design new reactive programming languages using insights from how hook-indexed state corresponds to standard references.
A theory result. No direct application yet.
Authors
Toby Ueno, Ezra Cooper, Simon Fowler, Sam Lindley
Abstract
React is currently the most popular JavaScript library for front-end web development. It endows UI components with state via the useState construct, through a mechanism that we name hook-indexed state. However, React's implementation of hook-indexed state is both fragile and poorly understood. Programmers frequently experience unexpected behavior, and the benefits of programming in this paradigm are wholly unclear. We define Lambda-React-Hook, a core calculus that captures the essence of hook-indexed state, and give it a type system to statically rule out unexpected behavior. We then translate Lambda-React-Hook into a calculus Lambda-React-Ref based on ML-style references, and prove that this translation preserves typability and semantics, thus showing that hook-indexed state is expressible in terms of standard references. The translation is local and admits a compositional definition, but involves significant code duplication. As well as illuminating the essence of state in React, our observations can inform the design of future reactive programming systems.