## 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! ## Authors Sumin Kim — [@LinkedIn](https://www.linkedin.com/in/ppsm920/) — [@GitHub](https://github.com/ppsm920) Vicki Lee — [@LinkedIn](https://www.linkedin.com/in/vlee022/) — [@GitHub](https://github.com/vlee022) Jonathan Mendoza — [@LinkedIn](https://www.linkedin.com/in/jonathan-mendoza1/) — [@GitHub](https://github.com/mendxza) Cole Redfearn — [@LinkedIn](https://www.linkedin.com/in/coleredfearn/) — [@GitHub](https://github.com/coleredfearn/) ## GitHub https://github.com/oslabs-beta/atomos ## Website https://getatomos.io/

coleredfearn

Atomos — A New Recoil Visualization Tool Powered by React Flow

Join Our Newsletter. No Spam, Only the good stuff.