Introducing TotalRecoilJS: A new developer tool for visualizing your Recoil state
TotalRecoilJS is a tool created to help developers visualize, track, and debug their Recoil state via a Chrome extension.
What is Recoil?
Recoil is an experimental state management library for React apps, created by Facebook engineers and introduced by Dave McCabe at May’s React Europe developer conference. Recoil was created to help developers access flexible shared state, derived data and queries, and app-wide state observation using a lightweight framework that essentially works like React Hooks.
Recoil aims to provide a more “React-ish” way of managing and deriving state across React components. It provides an alternative to Redux and Context API and offers developers functionality that is difficult to achieve with React alone. Recoil integrates with functional components and uses atoms and selectors to manage state.
Atoms are units of state. They can be subscribed to individually, so that only the components that need to access a piece of state can subscribe. All subscribed components will be automatically re-rendered on any change to atom state. These components can be anywhere within the component tree, and the state does not need to be passed through a common parent component to be accessed. This lessens unnecessary re-rendering of components that can occur using vanilla React and prop drilling. Here’s an example from the Recoil docs:
Selectors are pure functions that take atoms as input and create derived state. When an atom value updates, any selector function that subscribes to that atom is re-evaluated. Components subscribe to selectors, and are re-rendered when the selectors change as well. Selectors can not only return a value, but they can also return a promise, so you can perform asynchronous functions in Recoil selectors.
What are the benefits?
Recoil was built to address certain issues within Facebook and has been used internally for some time before it was open-sourced in May. The creators believed it could be useful to other developers because of how it contrasts with other state management libraries. We’ve already mentioned how it could be useful to prevent unnecessary re-rendering that sometimes occurs in vanilla React.
It is also more lightweight and easier to implement than Redux, which requires a great deal of boilerplate to set up and can be overkill for smaller applications. It is also unclear whether Redux will support concurrent mode, which Recoil intends to do.
It’s more flexible than context API, which was not created for high-frequency updates and also has some limitations around the ability to store indefinite values. In certain applications, this can create a complex and overlapping web of contexts and consumers.
It works a lot like hooks, meaning that the setup and use of atoms and selectors will feel at least somewhat familiar for developers who are already using React hooks.
What is TotalRecoilJS?
When working with Recoil, we quickly discovered that because it’s so new, there were no developer tools available. We took inspiration from all the great dev tools we use — React dev tools, Redux dev tools, and Realize for React, to create one for use with Recoil.
For this project, it was important to us that this be an easy-to-use Chrome extension, rather than an NPM package. We wanted a simple plug-and-play tool for developers to use without adding any weight to their application. We did that by extracting the data from the React Dev Tools, so the only thing you’ll need to use our extension (besides a Recoil app!) is the React Dev tools extension.
What does it do?
With TotalRecoilJS, you can visualize your component tree and see which components are subscribed to which atoms.
When you click on an atom’s name, all components that are subscribed to that piece of state will light up.
You can troubleshoot by seeing the current state held in each atom.
You can also view a list of previous states to track changes. On the history tab, you can see up to 10 previous state snapshots.
And finally, you can view which selectors are subscribed to which atoms. Using our interactive sunburst, you can view all selector-atom subscriptions, or click on any selector to see all subscribed atoms.
We’d love for you to test our extension and submit any issues or contributions you may have. Head over to our Github and the TotalRecoilJS site for more information, and let us know what you think down below! If you’d like to learn more about Recoil, watch this announcement video from Dave McCabe.
https://www.youtube.com/watch?v=_ISAA_Jt9kI
Thanks to the development team:
Anthony Lee | github | linkedin
Kevin Ruan | github | linkedin
Khizar Rehman | github | linkedin
