React-tRace: A Semantics for Understanding React Hooks = React-tRace: 리액트 훅을 이해하기 위한 의미구조

다국어 초록 (Multilingual Abstract)

React has become the most widely used web front-end framework, enabling the creation of graphical user interfaces in a declarative and compositional manner. Hooks are a set of APIs that manage side effects in function components in React. However, their semantics are often seen as opaque to developers, leading to UI bugs.
We introduce React-tRace, the first formal operational semantics of the essence of React Hooks. We demonstrate that our model captures the behavior of React, by theoretically showing that it embodies essential properties of Hooks and empirically comparing our React-tRace-definitional interpreter against a test suite. Furthermore, we showcase a practical visualization tool based on the formalization to demonstrate how developers can better understand the semantics of Hooks.

국문 초록 (Abstract)

오늘날 웹 앞단(web front-end)을 만드는 데 가장 널리 쓰이는 개발 틀(framework)인 리액트(React)는, 사용자 화면(graphical user interface, GUI)을 조립식으로 선언하여 만들 수 있게 해 준다. 훅(Hook)은 리액트의 함수형 화면 부품(component)에서 부수 효과(side effect)를 관리하는 API 모음이다. 그러나 개발자들은 훅의 동작 방식을 제대로 모르는 경우가 많아, 화면을 그릴 때 오류가 발생하곤 한다.
우리는 리액트 훅의 핵심을 처음으로 담아낸 엄밀한 실행 의미구조(operational semantics)인 React-tRace 를 제시한다. 우리 모델이 리액트의 실제 동작을 잘 담아낸다는 것을 보이기 위해, 훅의 중요한 특성을 만족함을 이론적으로 증명하고, React-tRace 를 구현한 실행기(definitional interpreter)를 테스트 모음(test suite)과 실험적으로 비교한다. 나아가 우리는 개발자가 훅을 더 잘 이해할 수 있도록, 엄밀한 의미구조를 바탕으로 실용적인 시각화 도구를 개발하였다.

목차 (Table of Contents)

• Abstract i
• 1 Introduction 1
• 1.1 Overview of React 1
• 1.2 The Problem 3
• 1.3 Our Solution 4
• 2 Peculiarities of React Hooks 6
• 2.1 The Peculiarity of useState 8
• 2.2 The Peculiarity of useEffect 10
• 3 Re-Rendering Pitfalls with React Hooks 12
• 3.1 Infinite Re-Rendering 12
• 3.1.1 Infinite Render Loop with an Effect 13
• 3.1.2 Top-Level Call to a Setter Function 14
• 3.2 Unnecessary Re-Rendering 14
• 4 An Operational Semantics for the Essence of React Hooks 16
• 4.1 Semantic Objects 17
• 4.1.1 Base Values 18
• 4.1.2 React Machinery 18
• 4.2 Operational Semantics 21
• 4.2.1 Render Loop 23
• 4.2.2 Evaluating an Expression 25
• 4.2.3 Initial Render 28
• 4.2.4 Committing Effects After Render 29
• 4.2.5 Checking, Re-Render, and Reconciliation 31
• 4.3 An Illustrative Example 33
• 5 The React-tRace Interpreter and the Visualizer 37
• 6 Conformance with React 39
• 6.1 Conformance Theorems on React 39
• 6.1.1 Key Properties of React 40
• 6.1.2 Optimization in React 43
• 6.2 Conformance Test Suite 46
• 7 Discussion 49
• 7.1 Extensions to Other Hooks 49
• 7.2 Verifying the React Compiler 50
• 7.3 Beyond React 51
• 8 Related Work 52
• 8.1 Research on React 52
• 8.2 React Development Tools 53
• 8.3 Functional Reactive GUI Frameworks 53
• 8.4 The Elm Architecture 53
• 8.5 Multi-tier Programming 54
• 8.6 JavaScript and Web Semantics 54
• 9 Conclusion and Future Work 56
• A Full Operational Semantics 66
• A.1 Semantic Objects 66
• A.2 Operational Semantics 67
• B Proofs of Theorems 75
• C Comparison of Reactive UI Frameworks 84
• C.1 React 85
• C.2 Preact 85
• C.3 Dioxus 86
• C.4 Solid 87
• C.5 Leptos 87
• C.6 Angular 88
• C.7 Vue 89
• C.8 Svelte 89
• C.8.1 Svelte with Runes 89
• C.8.2 Svelte without Runes 90
• C.8.3 SwiftUI 90
• 요약 92
• 감사의 말 93