Reactime – A time-travel state debugger for React apps

Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.

This dev tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components.

Here’s a demo of it in action:

Comes in two parts: a Chrome Extension and a NPM package that you need to install inside your project.

npm i reactime

You’ll also need perform some (upfront) code adjustments so that the package sends data over to the extension:

import reactime from 'reactime';

const rootContainer = document.getElementById('root');
ReactDOM.render(, rootContainer);

reactime(rootContainer);

To support concurrent mode, you’ll need this adjustment:

import reactime from 'reactime';

const rootContainer = ReactDOM.createRoot(document.getElementById('root'));
rootContainer.render();
reactime(rootContainer);

Reactime →

💡 Be sure to also check out the “regular” React DevTools. They’re awesome!

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.