HookLens: Visual Analytics for Understanding React Hooks Structures

TL;DR

HookLens is an interactive visual analytics system that helps developers understand how Hooks defines dependencies and data flows between components, and significantly improves participants' accuracy in detecting anti-patterns compared to conventional code editors.

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 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.

Figures (7)

• Figure 1: Ratio of posts about each built-in Hook on Stack Overflow (2020–2024). Data are obtained by querying posts tagged with reactjs that mention the name of each Hook using the Stack Exchange API (https://api.stackexchange.com/). useState and useEffect denote the functions for the State and EffectHooks, respectively.
• Figure 2: Examples of three anti-patterns. Each code snippet illustrates Unreferenced States and Props, Effect modifying parent States, and Prop drilling, respectively. In each example, relevant States, Effects and Props within Components are highlighted with red outlines, while red edges across Components indicate State propagation paths.
• Figure 3: Data extraction and visualization pipeline of HookLens. HookLens parses source files into abstract syntax trees (ASTs) using Espree and the TypeScript compiler API, then extracts Components, Hooks, and their reference relationships with predefined rules. It visualizes the extracted data as a node-link diagram, highlighting invalid references in red to facilitate anti-pattern detection.
• Figure 4: Types of anti-patterns revealed by HookLens. Anti-patterns are highlighted with translucent red backgrounds: Unreferenced states and props, shown as red outlined State and Prop nodes; prop drilling, represented by red edges between Prop nodes; and effect modifying parent states, represented by red edges originating from Effect nodes.
• Figure 5: Accuracy comparison between HookLens and VS Code in detecting anti-patterns, separated by proficiency. Novice participants have less than two years of experience, while intermediate participants have more than two years. Using HookLens resulted in statistically significant improvements in F1-score and recall for both novice ($p \ll 0.01$) and intermediate ($p \ll 0.05$) groups, though not in precision.