HookLens: Visual Analytics for Understanding React Hooks Structures = HookLens: 리액트 훅 구조 이해를 위한 시각적 분석

다국어 초록 (Multilingual Abstract)

Maintaining and refactoring React web applications is challenging, as React code often becomes complex due to its core API called Hooks. For example, Hooks often lead developers to create complex dependencies among components, making code behavior unpredictable and reducing maintainability, i.e., anti-patterns. To address this challenge, we present HookLens, an interactive visual analytics system that helps developers understand how Hooks define dependencies and data flows between components. Informed by an iterative design process with experienced React developers, HookLens supports users to efficiently understand the structure and dependencies between components and to identify anti-patterns. A quantitative user study with 12 React developers demonstrates that HookLens significantly improves participants’ accuracy in detecting anti-patterns compared to conventional code editors. Moreover, a comparative study with state-of-the-art LLM-based coding assistants confirms that these improvements even surpass the capabilities of such coding assistants on the same task.

국문 초록 (Abstract)

리액트(React)로 작성된 코드는 핵심 API인 훅(Hooks)으로 인해 종종 복잡해지며, 이에 따라 웹 애플리케이션의 유지보수와 리팩토링이 어려워진다. 예를 들어 훅은 컴포넌트 사이에 복잡한 의존성을 유발하여 코드의 동작을 예측하기 어렵게 만들고 유지보수성을 저하하는 안티패턴을 초래하기도 한다. 이러한 문제를 해결하기 위해 우리는 훅이 컴포넌트 간의 의존성과 데이터 흐름을 어떻게 정의하는지를 이해하도록 돕는 상호 작용형 시각적 분석 시스템 HookLens를 제안한다. HookLens는 숙련된 리액트 개발자들과의 반복적인 설계 과정을 통해 개발되었으며, 사용자들이 컴포넌트 간의 구조와 의존성을 효과적으로 이해하고 안티패턴을 탐색할 수 있도록 지원한다. 12명의 리액트 개발자를 대상으로 한 정량적 사용자 연구 결과, HookLens는 일반적인 코드 에디터 사용 환경 대비 사용자의 안티패턴 탐지 정확도를 크게 향상시켰다. 또한 최신 LLM(대규모 언어 모델) 기반 코드 어시스턴트 도구들과의 비교 실험을 통하여 HookLens에 의해 향상된 사용자의 능력이 코드 어시스턴트 도구들의 안티패턴 탐지 능력보다도 뛰어남을 확인하였다.

목차 (Table of Contents)

• CHAPTER 1 Introduction 1
• CHAPTER 2 Background 4
• 2.1 React 4
• 2.2 Anti-Patterns in React 6
• CHAPTER 3 Related Work 9
• 3.1 React Application Analysis 9
• 3.2 Software Visualization 10
• CHAPTER 4 Tasks and Design Requirements 13
• 4.1 Tasks 13
• 4.2 Design Requirements 14
• CHAPTER 5 Iterative Design Process 17
• CHAPTER 6 HookLens: An Interactive Visual Analytics System 19
• 6.1 Data Extraction Pipeline 19
• 6.2 Visual Analytics Design 21
• CHAPTER 7 User Study 24
• 7.1 Objectives and Design 24
• 7.2 Quantitative Results 28
• 7.3 Qualitative Findings 29
• CHAPTER 8 Comparative Evaluation with LLM-based Coding Assistants 34
• 8.1 Objectives and Design 34
• 8.2 Results 35
• CHAPTER 9 Discussion 39
• 9.1 Scalability and Project Context 39
• 9.2 Supporting Real-World Workflows for Semantic Validation 40
• 9.3 Extending Support to the Broader React Ecosystem 41
• 9.4 Visual Analytics in the AI Era 42
• CHAPTER 10 Conclusion 43
• BIBLIOGRAPHY 44
• APPENDIX A A Prompt for Comparative Evaluation with LLM-based Coding Assistants 51
• APPENDIX B Detailed User Study Results 54
• APPENDIX C Detailed Comparative Study Results 55
• Abstract (Korean) 56