|
9 | 9 | <br>
|
10 | 10 | </h1>
|
11 | 11 |
|
12 |
| -<h4 align="center"> Reactime is a performance and debugging tool for React developers <b>(compatible with Gatsby and Next.js)</b>. It records a snapshot whenever a target application's state is changed and allows the user to jump to any previously recorded state. It also detects the amount of renders of each component and average time of rendering.</h4> |
| 12 | +<h4 align="center"> Reactime is a performance and debugging tool for React developers <b>(Beta version for Gatsby and Next.js)</b>. It records a snapshot whenever a target application's state is changed and allows the user to jump to any previously recorded state. It also detects the amount of renders of each component and average time of rendering.</h4> |
13 | 13 |
|
14 | 14 | <br>
|
15 | 15 | <p align="center">
|
|
40 | 40 | </p>
|
41 | 41 |
|
42 | 42 | <p align="center">
|
43 |
| - <a href="#how-to-use">How To Use</a> • <a href="#features">Features</a> • <a href="https://reactime.io">Website</a> • <a href="#read-more">Read More</a> |
| 43 | + <a href="#how-to-use">How To Use</a> • <a href="#features">Features</a> • <a href="https://reactime.io">Website</a> • <a href="#read-more">Read More</a> |
44 | 44 | </p>
|
45 | 45 |
|
46 | 46 | Currently, Reactime supports React apps using stateful components and Hooks, including frameworks like Gatsby and Next.js, with beta support for Recoil and Context API.
|
47 | 47 |
|
48 |
| -<b>Reactime version 7.0</b> can help you to avoid unnecessary re-renders. Identifying wasted renders in your React applications is the perfect start to identifying most performance issues. |
49 |
| -Reactime 7.0 fixes previous version bugs and incorporates improved visualizations for component relationships. Reactime 7.0 includes expanded [typedoc](https://typedoc.org/api/) documentation for developers looking to contribute to the source code. |
| 48 | +<b>Reactime version 8.0</b> allows you to run A/B testing on your application by storing a "series" of state data snapshots. At any stage in the dev cycle, devs could run Reactime again and select any past series to do an A/B test with the current series of snapshots. With Save Series, developers have access to view trends in their App's component render times during development by comparing the previous series of snapshots. |
| 49 | + |
| 50 | +Reactime 8.0 fixes previous version bugs and incorporates improved visualizations for component relationships. Reactime 8.0 includes expanded [typedoc](https://typedoc.org/api/) documentation for developers looking to contribute to the source code. |
50 | 51 |
|
51 | 52 | After installing Reactime, you can test its functionalities with your React application in development mode.
|
52 | 53 |
|
@@ -100,6 +101,14 @@ Reactime offers debugging and performance tools for Next.js apps: time-traveling
|
100 | 101 |
|
101 | 102 | 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.
|
102 | 103 |
|
| 104 | +### 🔹 Snapshot Comparison |
| 105 | + |
| 106 | +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. |
| 107 | +<p align="center"> |
| 108 | +<img src="http://g.recordit.co/KNxvT94qxd.gif" /> |
| 109 | +</p> |
| 110 | +<br> |
| 111 | + |
103 | 112 | ### 🔹 Viewing
|
104 | 113 |
|
105 | 114 | You can 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.
|
@@ -143,7 +152,11 @@ After cloning this repository, developers can simply run `npm run docs` at the r
|
143 | 152 | - [Deep in Weeds with Reactime, Concurrent React_fiberRoot, and Browser History Caching](https://itnext.io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb)
|
144 | 153 |
|
145 | 154 | ## <b>Authors</b>
|
146 |
| - |
| 155 | +- **Dennis Lopez** - [@DennisLpz](https://github.com/DennisLpz) |
| 156 | +- **Cole Styron** - [@colestyron](https://github.com/C-STYR) |
| 157 | +- **Ali Rahman** - [@CourageWolf](https://github.com/CourageWolf) |
| 158 | +- **Caner Demir** - [@demircaner](https://github.com/demircaner) |
| 159 | +- **Kevin Ngo** - [@kev-ngo](https://github.com/kev-ngo) |
147 | 160 | - **Becca Viner** - [@rtviner](https://github.com/rtviner)
|
148 | 161 | - **Caitlin Chan** - [@caitlinchan23](https://github.com/caitlinchan23)
|
149 | 162 | - **Kim Mai Nguyen** - [@Nkmai](https://github.com/Nkmai)
|
|
0 commit comments