Introducing SmoreJS: State Management Optimization for Recoil
Recoil is a state management library built for React by the engineers at Facebook. It’s an experimental project that has caught the attention of many in the dev community. There are over 13k stars on GitHub! (and 35K overly-opinionated youtube influencer reviews).
What makes Recoil unique is all in its state management architecture. An application’s state is broken down into pieces called atoms. Pure functions called selectors are used to transform this state data either synchronously or asynchronously. When a component subscribes to an atom, it shares state with all other subscribers of the particular atom., and when the atom updates each subscriber is re-rendered with the update.
Since Recoil is still in its experimental state, there are few tools that would help optimize an application based around Recoil. Figuring out why a component rerender based on an atom/selector change can help developers debug and optimize their applications, and that is why we developed SmoreJS.
State Management Optimization for Recoil
Smore is an Electron based GUI that provides a testing environment for applications using Recoil. When an app is loaded into Smore, it is nested in an iframe while its state data is analyzed upon update. It provides developers data about the state change in their application’s components between each update, parses through the differences and displays the changes. An interactive visual displays the app’s component tree and highlights the newly updated components with a color change. The changes are then saved to a log that the user can then save to a database for future references.
We were able to do this by designing recursive algorithms that traverse through the React Fiber tree data that was extracted from within the iframe. Upon every update, our application checks for any changes to the state data within the React Fiber Tree and displays the differences. Here is a quick demonstration on how Smore works.
DEMO
First, users would load a URL of their React/Recoil application.
Then, the users would see a component tree that displays component parent, sibling, and children relationships. Users would also be able to click on items in a dropdown menu with atoms and selectors in order to highlight the specific components that are subscribed to the selected atom or selector.
By clicking the update button, users are able to see the state data of their application. The state data displays:
- Component and atom/selector subscriptions
- How many times the virtual DOM has been updated
- A list of atoms and selectors within the user’s application
- The specific atoms and selectors that were updated and their values
- The number of renders that have occurred up to that atom/selector’s render
Users are also able to save their logs to a database. These logs include the version number of that atom/selector’s render and the differences in atom/selector values of each render.
If you want render metrics or need to investigate differences in the state data of your application’s atoms upon each render, head over to smorejs.com to download. We’d love it if you found us worthy of a star. One thing to note is that SmoreJS is built to work with Recoil applications as of version 0.3.1. Consider this a friendly reminder Recoil is an experiment and subject to change (Smore is not compatible with earlier versions at time of writing).
Our team might be biased, but we encourage you to check out recoiljs.org or watch Dave McCabe’s presentation at ReactEurope 2020. When you do, take it for a spin with SmoreJS and let us know what you think! We welcome feedback and are open to contributions.
SmoreJS is an open source project available on our Github.
Our team is
