How to visualize data requests in your React application using React Fetch Tree
What is React Fetch Tree?
React Fetch Tree is a Chrome Extension that allows developers to pinpoint where data requests are happening in their apps during development, helping to eliminate or consolidate unnecessary data fetching, and avoid “waterfalls”. It can be used to streamline your application by removing or consolidating data requests when waterfalls are identified or to refactor your request process.
React Fetch Tree provides a visualization of the component tree that shows the layout and hierarchy of your React app with all its components. Components that contain data requests are highlighted within the visualization, so you can easily see the relationship between components that contain data requests. Highlighted nodes can be clicked on to reveal details about the data requests they contain.
What inspired us to create React Fetch Tree?
One of the biggest factors that limits apps from loading faster is the need to request external data and resources and wait for these to be fetched and received before rendering is completed. There have been countless tools developed to expedite and streamline this process, but React Concurrent Mode and Suspense for Data Fetching promises to be one of the most exciting, turning the process of requesting external data on its head.
We developed React Fetch Tree with these emerging technologies directly in mind. When React Concurrent Mode and Suspense become available, React Fetch Tree could be used to identify areas in your app where the implementation of Suspense for Data Fetching will be most advantageous.
We could not be more excited to share React Fetch Tree with you.
How does React Fetch Tree work under the hood?
Parser
We implemented Babel Parser to generate an Abstract Syntax Tree (AST) that represents the client’s codebase, which is subsequently traversed to find data requests within all components across the application. The data retrieved from this process is then stored as an object.
FetchTreeHook
FetchTreeHook is a React component that provides a connection between the local Node.js environment and browser environment. The object created by the parser is imported into our FetchTreeHook and passed to our Chrome Extension panel. Installation in your React app is a breeze — simply place inside your top-level component:
Fiber Tree
We developed a custom algorithm to recursively traverse the React Fiber and obtain a data structure containing all the components currently rendered. This function leverages the left-child-right-sibling tree of each React Fiber Node and is run on each state update.
Visualization
Our visualization was created using Airbnb’s visx, which combines the benefits of D3 and React to provide a powerful and responsive visual rendering of the component tree. Combining the data from the parser with the model from the React Fiber, we can see our components containing data requests highlighted in our visx visualization.
Documentation
We have provided extensive documentation on our website, reactfetchtree.com, and in our GitHub repository.
Want to contribute to React Fetch Tree?
React Fetch Tree is an open-source project developed under tech accelerator OS Labs. We welcome contributions and feedback via GitHub.