This week on the React Wednesday show on the CodeItLive channel on Twitch we spoke with the team behind Realize – a set of browser extensions that visualize React State and Component Hierarchy in React apps.
Using Realize will help React developers build React applications faster because the developer can be surer about exactly what happens under runtime conditions. The extension lives on the Chrome and Firefox app stores and is freely available. The project is open source and hosted on GitHub.
The team behind the project met during an open source accelerator program called OSLabs. They had intended on working together in person on Realize. The Coronavirus pandemic caused a shift in plans, and the team has been collaborating remotely since. When asked about any helpful tools they used for remote collaboration, the team called out Notion, and Excalidraw as being exceptionally helpful for collaborating on this complex project.
They decided as a group to build Realize because using the React DevTools wasn’t the best representation of the runtime app conditions because it uses a deeply nested component structure. While accurate, the amount of information is overwhelming. Harry Clifford shared that he usually wrote and drew out the React component state as part of his React development.
How does it work?
Realize works in conjunction with React DevTools by enhancing the display of the component hierarchy and the internal state values. Realize helps a lot because it removes a surprising about of information. Why? The React Dev Tools extension adds a lot of information that complicates understanding the internal state or hierarchy of components. The team spent a fair amount of time paring down the displayed information to the exact pieces that are helpful and avoiding the parts that obfuscate.
During the product demo on the broadcast, Horatiu Mitrea showed how to inspect the components in a React application. React components are represented in a visual hierarchy making it easy to understand the relationships. Clicking on a component shows the internal state, what hooks are present, state values, and children. You can search for components by name using the built-in search box.
How Do You Make A Browser Extension?
I have never build a browser extension for Chrome nor Firefox so it was interesting to learn how it works. It turns out there are a number of ways one can build an extension and within those ways, there are a number of permissions one can allow the extension to use.
Did you know each extension has a review process performed by the browser app store team which goes through the extension and verifies the extension isn’t doing malicious behavior? Browser extension permissions are granted granularly by the extension developer. The more permissions requested by the extension, the lengthier the review process. This puts the onus on the developer to only ask for what is needed, else the review process can take way too long.
What the Team Learned
Another topic that came up was the way that React handles state internally. For example, Harry Clifford shared that a component with multiple useState hooks is stored as a LinkedList without self-termination. The team had to work around this issue with custom filtering code because circular references won’t work when stringifying data to pass back to the Realize extension. These low-level implementation details were important to work through given the deep nature of the Realize extension. Most React developers won’t need to know how that works, so the team got to learn something interesting as part of their work on the extensions.
Towards the end of the show we spoke about how each person benefited personally from the project. Fan Shao discussed the enjoyment of working on very complex problems and collaborating in the team environment. She felt like the project gave her an opportunity to work on new software development topics. This sentiment was echoed by the rest of the team. The team works very well together, are all very bright, motivated, and learn a lot from each other.
What Is Next?
Pete DiLilo from our team joined the discussion and kicked off a discussion about next steps for the Project. Henry Black talked about several ideas on the list. One idea that seemed very interesting and useful would be to use the visual canvas to show render time of components. Such a feature would make it much easier to inspect React component hierarchies and finding components unexpectedly rendering slow.
Get Involved
The team is accepting PRs in GitHub. Those who would like to contribute can help out in a variety of ways. Setting up the project is pretty straightforward and the development team would be happy to help out anyone who needs a hand getting it all running locally.
HELPFUL LINKS
Watch the broadcast on Realize
