React Performance Tool
Nominated for React Open Source Awards 2020
Reactime is an open source Chrome developer tool for time travel debugging and performance monitoring in React applications. Reactime enables developers to record snapshots of application state, jump between and inspect state snapshots, and monitor performance metrics such as component render time and render frequency.
How To Use • Features • Website • Read More
Reactime 18.0 introduces a range of new and improved features aimed at optimizing performance and enhancing compatibility. With support for Next.js and Remix, increased testing coverage(93% backend, frontend needs more), and structural improvements to the codebase. Additionally, we are proud to announce the launch of our newly redesigned website, which serves as a hub for the latest updates and information about Reactime. To aid with debugging, we have included demo applications for Next.js and Remix, enabling future iterators to test and troubleshoot with greater ease and efficiency.
Reactime 17.0 We are pleased to announce the release of Reactime 17.0, which includes several new and improved features. Context API support has now been added. You can now monitor state stored in context if your component is subscribed to context changes. We also improved the tooltip UI on our tree diagram to improve readability. In addition, we have redesigned the Reactime.dev website using Tailwind CSS, resulting in a clean, modern design with an intuitive layout. To stay informed about future updates, you can now sign up for email notifications.
Reactime 16.0 presents the codebase with substantial, much-needed clean-up. From the backend and frontend to testing, the Reactime XVI team has: removed vestigial code, added comments to clarify code, implemented 100% testing coverage for the codebase, compartmentalized and modularized files, and implemented typescript.
The primary purpose of this update is to allow easier understanding of Reactime's codebase by individuals or groups wishing to further update Reactime, keeping this great developer tool alive.
With release of Node v18.12.1(LTS) on 11/4/22, the script has been updated to
'npm run dev' || 'npm run build' for backwards compatibility.
For version
Node v16.16.0, please use script 'npm run devlegacy' || 'npm run buildlegacy'
Previously, Reactime 14.0 and 15.0 added the exciting features below:
I. React Router Compatibility
Reactime is now compatible with React Router
applications! Prior to Reactime 14.0, recording state snapshots as the user
navigated across various routes was possible, but time travel debugging was only
possible for the current route (i.e. jumping back to a prior state at a
different route was not possible). In order to streamline debugging of
applications with multiple routes, Reactime 14.0 added functionality that allows
the user to time-travel back to different routes, including live updating in the
browser to reflect the state of their application at that previously visited
route.
II. Classifying State Snapshots by Route
The list of state snapshots in the
Reactime dashboard is now classified by route to give the developer visual cues
of the snapshot-route relationship and make time travel debugging of various
routes easier.
III. Filtering Performance Metrics By Route
The Reactime dashboard includes
a stacked bar graph showing render times for each component, with a separate bar
stack for each snapshot. With Reactime 14.0, this composite bar graph can now be
filtered by route to allow the developer to review detailed performance data by
route.
IV. Visualize And Compare Components Within a Snapshot
Users not only have
access to multiple snapshots, but can now zone into a specified snapshot more
granularly through a new visualization consisting of its individual components.
These new graphs are rendered directly in the same Performance tab in Reactime
and provide details for each component when the user hovers over, providing a
new visual comparison of components across a single chosen state.
After installing Reactime, you can test its functionalities with your React application in development mode.
Please note, the time jumping feature will ONLY work when your application is running in development mode. In production mode, you are able to view your application’s component map but no additional features.
To get started, install the Reactime extension from Chrome Web Store.
NOTE: The React Developer Tools extension is also required for Reactime to run, if you do not already have it installed on your browser.
Go to Chrome Extensions (make sure Chrome Extension is in Developer Mode) for
manual installation in (https://developer.chrome.com/extensions/faq#faq-dev-01)
and click on Load Unpacked. Use src/extension/build/ to load this extension.
Turn on 'Allow access to file URLs' in extension details page if testing
locally.
Please refer to Developer Install for a detailed guide:
Refer DEVELOPER README for more info on the project, and instructions on building from source.
After installing the Chrome extension, just open up your project in the browser.
Then open up your Chrome DevTools and navigate to the Reactime panel.
Reactime initially runs using the dev tools global hook from the Chrome API. It takes time for Chrome to load this. Try refreshing your application a couple times until you see Reactime running.
Try refreshing the application you want to test and refresh the DevTools by clicking the right mouse button “Reload frame”.
Reactime is an open source project, and we’d really appreciate your help with improving user experience. Please read DEVELOPER README, and create a pull request (or issue) to propose and collaborate on changes to a repository.
With release of Node v18.12.1(LTS) on 11/4/22, the script has been updated to
'npm run dev' | 'npm run build' for backwards compatibility.
For version
Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
You can view your application's file structure and click on a snapshot to view
your app's state. State can be visualized in a Component Graph, JSON Tree, or
Performance Graph. Snapshots can be diffed with the previous snapshot, which can
be viewed in Diff mode.
You can save a series of state snapshots and use it to analyze changes in
component render performance between current and previous series of snapshots.
You can also name specific snapshots and compare all snapshots with the same
name.
When toggled to a specific snapshot, a visualization of the individual
components of the snapshow will be displayed. This can be done under the same
Performance tab where the snapshots are rendered. You will also find details of
each component upon hovering.
Whenever state is changed (whenever setState, useState is called), this
extension will create a snapshot of the current state tree and record it. Each
snapshot will be displayed in Chrome DevTools under the Reactime panel.
One of the most common issues that affects performance in React is unnecessary render cycles. This problem can be fixed by checking your renders in the Performance tab in Chrome DevTools under the Reactime panel.
Using the actions sidebar, a user can jump to any previous recorded snapshots. Hitting the jump button on any snapshot will allow a user to view state data at any point in the history of the target application.
Reactime offers full support for Gatsby applications. You would be able to identify unnecessary renders, duration of each rendering, travel-debugging features and visual representation of the tree components.
Reactime offers debugging and performance tools for Next.js apps: time-traveling debugging, preventing unnecessary components re-renders and making your application faster.
Reactime offers debugging and performance tools for Remix apps (in beta). Support still needs to be added for multi-route time traveling. Every other feature works.
Reactime offers support for TypeScript applications using stateful class components and functional components. Further testing and development is required for custom hooks, and Concurrent Mode.
After cloning this repository, developers can simply run npm run docs at the
root level and serve the dynamically generated /docs/index.html file on a
browser. Doing so will provide a readable, extensible, and interactive GUI view
of the structure and interfaces of the codebase.
- Identifying unnecessary re-renders
- Single-click to view tooltip details on state visualizations
- Double-click to collapse child components
- A reverse filter with autofill to focus on a portion of the component map
- Ability to pan and zoom on state visualizations
- A dropdown to support development of projects on multiple tabs
- A slider to move through snapshots quickly
- A play button to move through snapshots automatically
- A lock button, which stops recording each snapshot
- A persist button to keep snapshots upon refresh (handy when changing code and debugging)
- Download/upload the current snapshots in memory
- Declarative titles in the actions sidebar
- Interative Tutorial Walkthrough
- Toggle feature allowing temporary pause of state monitoring
- Search bar now searches for specific nodes successfully
- Tab titles of chrome browser tabs not running an application in development mode are no longer affected by Reactime
- Overhauled Asynchronous calls to eliminate memory leaks due to unused async activities in the background.
- Improved UI and performance
- Reactime 18.0. Better than ever
- Reactime v17.0.0: Now with support for the Context API, and a modern UI
- Reactime XVI: Clean-up Time
- Inter-Route Time Travel with Reactime
- 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
- Time-Traveling Through React State with Reactime 9.0
- What time is it? Reactime!
- Ben Margolius - @benmarg
- Eric Yun - @ericsngyun
- James Nghiem - @jemzir
- Wilton Lee - @wiltonlee948
- Louis Lam - @llam722
- Samuel Tran - @leumastr
- Brian Yang - @yangbrian310
- Emin Tahirov - @eminthrv
- Peng Dong - @d28601581
- Ozair Ghulam - @ozairgh
- Christina Or - @christinaor
- Khanh Bui - @AndyB909
- David Kim - @codejunkie7
- Robby Tipton - @RobbyTipton
- Kevin HoEun Lee - @khobread
- Christopher LeBrett - @fscgolden
- Joseph Park - @joeepark
- Kris Sorensen - @kris-sorensen
- Daljit Gill - @dgill05
- Ben Michareune - @bmichare
- Dane Corpion - @danecorpion
- Harry Fox - @StackOverFlowWhereArtThou
- Nathan Richardson - @BagelEnthusiast
- David Bernstein - @dangitbobbeh
- Joseph Stern - @josephiswhere
- Dennis Lopez - @DennisLpz
- Cole Styron - @colestyron
- Ali Rahman - @CourageWolf
- Caner Demir - @demircaner
- Kevin Ngo - @kev-ngo
- Becca Viner - @rtviner
- Caitlin Chan - @caitlinchan23
- Kim Mai Nguyen - @Nkmai
- Tania Lind - @lind-tania
- Alex Landeros - @AlexanderLanderos
- Chris Guizzetti - @guizzettic
- Jason Victor - @theqwertypusher
- Sanjay Lavingia - @sanjaylavingia
- Vincent Nguyen - @VNguyenCode
- Haejin Jo - @haejinjo
- Hien Nguyen - @hienqn
- Jack Crish - @JackC27
- Kevin Fey - @kevinfey
- Carlos Perez - @crperezt
- Edwin Menendez - @edwinjmenendez
- Gabriela Jardim Aquino - @aquinojardim
- Greg Panciera - @gpanciera
- Nathanael Wa Mwenze - @nmwenz90
- Ryan Dang - @rydang
- Bryan Lee - @mylee1995
- Josh Kim - @joshua0308
- Sierra Swaby - @starkspark
- Ruth Anam - @nusanam
- David Chai - @davidchaidev
- Yujin Kang - @yujinkay
- Andy Wong - @andynullwong
- Chris Flannery - @chriswillsflannery
- Rajeeb Banstola - @rajeebthegreat
- Prasanna Malla - @prasmalla
- Rocky Lin - @rocky9413
- Abaas Khorrami - @dubalol
- Ergi Shehu - @Ergi516
- Raymond Kwan - @rkwn
- Joshua Howard - @Joshua-Howard
- Lina Shin - @rxlina
- Andy Tsou - @andytsou19
- Feiyi Wu - @FreyaWu
- Viet Nguyen - @vnguyen95
- Alex Gomez - @alexgomez9
- Edar Liu - @liuedar
- Kristina Wallen - @kristinawallen
- Quan Le - @blachfog
- Robert Maeda - @robmaeda
- Lance Ziegler - @lanceziegler
- Ngoc Zwolinski - @ngoczwolinski
- Peter Lam - @dev-plam
- Zachary Freeman - @zacharydfreeman
This project is licensed under the MIT License - see the LICENSE file for details.