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
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.
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.
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
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!
Authors
Sumin Kim — @LinkedIn — @GitHub
Vicki Lee — @LinkedIn — @GitHub
Jonathan Mendoza — @LinkedIn — @GitHub
Cole Redfearn — @LinkedIn — @GitHub
GitHub
https://github.com/oslabs-beta/atomos
