React tool automates fixing prop drilling to simplify code
Refactoring React Component Hierarchies to Eliminate Prop Drilling
Software Engineering
Summary
In building websites with React, passing data through many layers of code can make the code messy and hard to manage. The paper studies how often this happens and introduces a tool that finds these situations and cleans them up automatically. It does this by using two techniques to reorganize data sharing inside the code. The researchers tested their tool on many real projects and found it could fix most of these messy data flows, especially by using a method called the Context API.
What this means in practice
- •For frontend developers: Automatically identify and eliminate repetitive data passing across React components to make code easier to maintain.
- •For software engineering teams: Integrate automated refactoring tools into development pipelines to reduce technical debt caused by complex data propagation structures.
Authors
Vangelis Gkinis, Vassilis E. Zafeiris
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.