Atomos — A New Recoil Visualization Tool Powered by React Flow

Motivation

So you’ve heard about Facebook’s exciting new state management library, Recoil, and you want to implement it in your own React applications. Unfortunately, Recoil is so new that there aren’t a wealth of resources available on it, like there are for Redux, MobX, etc. Recoil and its atom-selector system is a fantastic state management solution, but it does present some technical challenges when dealing with complex, production-level React applications. What if there were a Recoil devtool that integrates with React DevTools to analyze a React application and render an intuitive, dynamic component tree complete with all atom-selector relationship data?

Recoil uses atoms to send small bits of state to various components throughout a React application, and uses selectors as pure functions to modify these atoms

Recoil

Recoil is an experimental, open-source state management library made for React and developed by Facebook. It uses atoms and selectors to pass state throughout an application, while increasing performance by preventing unnecessary re-renders. It is an elegant solution to the state management problem and should become an essential part of every React developer’s toolset in the near future.

Atomos analyzes React applications and renders a clean and intuitive component tree

Solution

Our team has developed Atomos, a new open-source Chrome developer tool designed specifically for Recoil. Atomos integrates seamlessly with React DevTools to provide real-time visualization and facilitate the planning and debugging of a React/Recoil application’s structure and state. In other words, Atomos analyzes a Recoil application and renders a clean, intuitive component tree generated with React Flow, that selectively highlights components to show how atoms and selectors are passing data through the application. Atomos saves developers time and energy by taking the guesswork out of the state management debugging process.

Atomos renders dynamically upon any change to state

Features

Clean and easy-to-read UI, developed with React Flow
Dynamically updates when state changes
Tracks component creation and deletion
Displays only the components which are currently being rendered
Integrates seamlessly with React Devtools — no need to download an npm package
Drag-and-drop functionality to customize the component tree layout
Identifies atom and selector relationships
Dropdown menus display all atoms and selectors in the application
Tracks atoms and selectors and selectively highlights them throughout the component tree

Atomos tracks atom and selector relationships throughout an application and displays which components they interact with

Why it Matters

Atomos helps developers align their mental model of how the application should manage state with what is actually happening in the code. Atomos enables developers to isolate an individual atom or selector and trace its passage of state throughout the component tree. They can then test the application and verify that state is being passed correctly in real time. This will ensure more stable, performant code, less time spent debugging, and faster development cycles.

The Future

In the future, we hope to add to the functionality of Atomos and convert it into a comprehensive state management debugging tool. Here are some features we have planned:

Enabling users to build their own planning trees, and then compare the application-visualized tree to their planning tree
Incorporating other forms of state management, such as props, React Hooks, and Context API
Allowing users to take snapshots of the component tree, store them in the application, and share them with other users
Augmenting React Flow nodes to display atom values and function body of selectors

Thank you for reading, and feel free to try out Atomos by visiting our GitHub repo below!