🤖 AI Summary
This study addresses the pervasive issue of prop drilling in React development, for which automated refactoring solutions remain lacking. This work proposes a static analysis-based approach to automate such refactoring. It first introduces a novel metric to quantify prop drilling complexity, enabling the precise identification of redundant property-passing paths. Subsequently, it leverages the React Context API and component composition patterns to automatically eliminate these redundancies. To operationalize this method, a Node.js command-line tool was developed and evaluated on real-world open-source projects, successfully resolving 76.3% of identified prop drilling instances. By achieving large-scale automated mitigation of prop drilling for the first time, this research significantly enhances the maintainability of React codebases.
📝 Abstract
In React front-end development, Prop Drilling is the practice of propagating data through component properties across multiple levels of the component hierarchy. Despite being discouraged by React documentation and characterized as a code smell by recent research, little is known about its prevalence, complexity, and potential for automated refactoring. In this work, we propose a static analysis method for identifying Prop Drilling instances in a React codebase and eliminating them using two automated refactoring strategies based on Context API and Component Composition. The proposed method is implemented as a Node.js command line tool, ReactRefactor, and empirically evaluated on a benchmark dataset of open-source React applications. The main findings of the empirical evaluation indicate (a) the frequent occurrence of prop drillings across benchmark projects, irrespective of project size; (b) their generally low to moderate complexity in terms of data propagation depth, contrasted with the more prevalent complexity arising from the simultaneous forwarding of multiple properties along the same path; and, (c) the potential for automated elimination of a substantial share (76.3%) of prop drillings, primarily through refactoring to the Context API.