Nominated for 2020 React Open Source Awards
What is Reactime?
When it comes to React applications, one of the most challenging aspects of optimizing your application is state management debugging. Nowadays there are so many ways to handle the state of your application, Hooks, Context API, Redux, etc, but not too many tools that are fully compatible with it all.
Reactime helps centralize the complex state debugging process.
Prior to Reactime v.7.0, Reactime was known simply as a time-travel debugging tool for React applications. With the new latest version, we have expanded its functionality and increased its accuracy. Now, Reactime 7.0 is a performance tool for React applications, including frameworks like Gatsby and Next.js. Not only does it help manage and understand the state of your application, but you can now also visualize the rendering frequency of your components. Additionally, Reactime now only runs in development mode which allows us to enhance its speed without slowing down your applications.
Let’s elaborate on what we improved and added with this new release of Reactime.
New features of Reactime v7.0
- New rendering feature + rendering time for each component ;
- Compatibility with Gatsby and Next.js;
- Runs on single and multi-page applications;
- Brand new minimalist and intuitive design for UI;
- Improved algorithm in terms of time-complexity for the performance tab;
- Works in development mode only, and doesn’t affect the speed of your app;
How it works
Utilizing the React Fiber reconciliation, Reactime records and caches snapshots of your application’s state every time it is changed and enables you to time-travel through previous states. It allows the developer to visualize a tree graph of the state changes, calculate the diff between snapshots, and have a playback option that helps identify the changes of the state step by step. Additionally, you can analyze each component’s rendering frequency and speed with our performance tab.
How it helps
Have you ever wondered why your application is running slow? One of the most common issues that can affect your React application’s performance is unnecessary render cycles. Typically, React components re-renders whenever their parent renders. It can be pretty overwhelming to debug and optimize a React app especially if you are not the one who built the application. With a quick google search, you can see countless articles on how a React developer can view the render cycles of their components. There are some great npm packages that engineers can incorporate in their development processes. Some examples include why-did-you-render, react-render-visualizer, rerendering-react-redux, and react-updates. Unfortunately, these require the developer to add packages that take up space and the extra step of wrapping their components or props in functions or even more components. However, with a simple download of Reactime v7.0, you no longer have to take up unnecessary time and space in your codebase.
Render Optimizer
Reactime now offers a way to visualize and track each of your react’s components renders. In Reactime’s performance tab, you will find a toggle button that switches the view between the graph of a snapshot’s performance as a whole, and the new rendering feature that shows you how many times a component has rendered.
The rendering view updates in real-time as you make state changes to your application. Streamline your debugging process by taking a look at how one child component renders in comparison to the rest of your components. You may find that there is a component that re-renders regardless of where you are changing state. Reactime will immediately pick this up, so you can jump back into your codebase and make performance-enhancing changes.
The rendering view also shows whether your component is stateful, as well as the average time a component takes to render. Some experimental users have found that Reactime has been very helpful for the optimization of their application. Using this new feature, one developer was notified that an image on their website was rendering 300 times over the course of a few seconds. They were able to easily fix this issue and substantially improve their website’s efficiency with one change.
Performant Algorithm
In addition to the new render optimizer, Reactime’s performance itself got a face lift with this latest version. While these changes are not visible on the extension itself, it greatly improves the developer experience with its improved time complexity.
UI/UX Design
Older Reactime users will notice one of the biggest changes to the extension is its more intuitive and modernized UI/UX design. Blue gradients, fiery-rose buttons, and additional icons make elements easier to find and guide you to the best parts of the application. In the component map tab, developers can now expand and close nodes, making it an effortless process to view specific parent-child relationships between your components.
How to collaborate with Reactime
As an open-source application, we’d love for you to test this application out and submit any issues or contributions you may have. We are always interested in improving and hearing your ideas. Let us know what you think down below or head over to Github or reactime.io for more information. The ReadMe for the developers you can find in the source folder.
More Resources
- Time-Travel State with Reactime
- React Fiber and Reactime
- Meet Reactime - a time-traveling State Debugger for React
- Deep in Weeds with Reactime, Concurrent React_fiberRoot, and Browser History Caching
Top comments (0)