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.

翻译：维护和重构React Web应用具有挑战性，因为其核心API——Hooks常导致代码结构复杂化。例如，Hooks常使开发者在组件间建立复杂的依赖关系，导致代码行为难以预测并降低可维护性，即形成反模式。为应对这一挑战，我们提出了HookLens——一个交互式可视化分析系统，可帮助开发者理解Hooks如何定义组件间的依赖关系与数据流。通过与经验丰富的React开发者进行迭代设计，HookLens支持用户高效理解组件间的结构与依赖关系，并识别反模式。一项针对12名React开发者的定量用户研究表明，与传统代码编辑器相比，HookLens能显著提升参与者检测反模式的准确率。此外，与最先进的基于LLM的编程助手进行的对比研究证实，在相同任务上，HookLens带来的改进甚至超越了此类编程助手的能力。