STATE: Track, Revert, Visualize
STATE DEBUGGER FOR REACT
The only time-travel debugging tool you need to develop your React application by tracking, visualizing, and reverting state changes.
Nominated for the Productivity Booster award at React Open Source Awards 2020!
Interested in contributing? Reactime is open-source: help make React state debugging easier!
Features
Visualizing, Recording, and Tracking STATE has never been simpler.
React Hooks
State tracking for useState, useEffect & more.
Context API
Additional Support for Context + useContext.
React Router
View page state and previous URLs.
TypeScript Support
Prop-drilling in TypeScript? Track all state changes easily.
Concurrent Mode
Experiment with new features like Suspense and useTransition.
TRY REACTIME WITH OUR DEMOS
Read more about what's new in Reactime here
See the latest Reactime release notes here
Simple Installation
Youtube Tutorial
- Download the extension from Chrome's Web Store.
- Install the npm package into your terminal/code editor inside of your application folder.
npm i reactime
- Call the library method on your root container after rendering your App.
If you are using Concurrent Mode, call the library like below:import reactime from 'reactime';
const rootContainer = document.getElementById('root');
ReactDOM.render(<App />, rootContainer);
reactime(rootContainer);import reactime from 'reactime';
const rootContainer = ReactDOM.createRoot(document.getElementById('root'));
rootContainer.render(<App />);
reactime(rootContainer);
