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!

Authors

Sumin Kim — @LinkedIn@GitHub

Vicki Lee — @LinkedIn @GitHub

Jonathan Mendoza — @LinkedIn @GitHub

Cole Redfearn — @LinkedIn@GitHub

GitHub

https://github.com/oslabs-beta/atomos

Website

https://getatomos.io/

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Router — A Basic Guide

React Router logo

Everything You Need to Know About Ember.js

everything about emberjs

Avoid This Common Anti-Pattern In Full-Stack Vue/Laravel Apps

Advanced TypeScript With Code Challenges: Union Types

Large elephant with Typescript logo and small elephant with JavaScript logo

The Complete Web Component Guide: Attributes and Properties

What’s New in Vue.js 2.0— Transitions

How to add deep linking support to your React Native project and also support Universal links…

8 UX Principles You Should Know as a Frontend Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cole Redfearn

Cole Redfearn

More from Medium

How to add apple-app-site-association and assetlinks.json files in NextJs and ReactJs.

Optimizing Server Side Rendering in React — Part 1

Cross-Origin iframe communication with Window.postMessage

Quickly building an advanced customised Table Component in ReactJs

A UI table component example