HookLens: Visual Analytics for Understanding React Hooks Structures
Fuente:
arXiv
Salvato in:
| Autori principali: | , , , , , , , |
|---|---|
| Natura: | Preprint |
| Pubblicazione: |
2026
|
| Soggetti: | |
| Accesso online: | |
| Tags: |
Aggiungi Tag
Nessun Tag, puoi essere il primo ad aggiungerne!!
|
| _version_ | 1866911533783580672 |
|---|---|
| author | Hwang, Suyeon Kweon, Minkyu Rhee, Jeongmin Lee, Soohyun Park, Seokhyeon Jung, Seokweon Jeon, Hyeon Seo, Jinwook |
| author_facet | Hwang, Suyeon Kweon, Minkyu Rhee, Jeongmin Lee, Soohyun Park, Seokhyeon Jung, Seokweon Jeon, Hyeon Seo, Jinwook |
| contents | 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 howHooks 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. |
| format | Preprint |
| id |
arxiv_https___arxiv_org_abs_2602_17891 |
| institution | arXiv |
| publishDate | 2026 |
| record_format | arxiv |
| spellingShingle | HookLens: Visual Analytics for Understanding React Hooks Structures Hwang, Suyeon Kweon, Minkyu Rhee, Jeongmin Lee, Soohyun Park, Seokhyeon Jung, Seokweon Jeon, Hyeon Seo, Jinwook Human-Computer Interaction Software Engineering 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 howHooks 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. |
| title | HookLens: Visual Analytics for Understanding React Hooks Structures |
| topic | Human-Computer Interaction Software Engineering |
| url | https://arxiv.org/abs/2602.17891 |