React Query Rewind: Time Travel Debugging Made Simple

Empower your debugging with React Query Rewind — a Chrome DevTool Extension designed to seamlessly time travel through server state with an intuitive visualization of your component hierarchy.

Teeringe
4 min readDec 15, 2023

React Query, otherwise known as TanStack Query, streamlines server state management with its declarative and easy-to-use approach. It eliminates the need for global state management or intricate boilerplate setups by handling caching, background updates, and stale data seamlessly. React Query has been implemented by tech giants such as Microsoft and Google, proving its simplicity appeals to small and large-scale projects. Despite its popularity, the existing React Query DevTools fall short in terms of depth and interactivity. One significant limitation is the absence of a feature crucial for debugging: the ability to view the application state at different points in time. This gap inspired the development of React Query Rewind, a Chrome DevTool extension aiming to enhance debugging capabilities through state time travel and component hierarchy tree visualizations.

React Query Rewind: Elevate Debugging with Seamless Time Travel State in Your Dev Tools

What is React Query Rewind?

React Query Rewind introduces a powerful DevTool extension designed to work in conjunction with React Query’s built-in DevTools in order to optimize time-traveling through state changes in an application. This open-source extension is tailored to enhance the debugging experience for React Query developers, allowing them to explore state changes and component relationships with ease.

Why use React Query Rewind?

React Query Rewind fills a void in React Query’s debugging toolkit by storing all changes in server state, allowing developers to time travel through said changes, and offers an interactive component hierarchy tree. These features enhance the debugging process and empower developers to optimize their React Query applications effectively.

How does it work?

React Query Rewind utilizes a custom hook that listens for state updates, ensuring memory-safe performance. It seamlessly integrates with React Query’s built-in dev tools, offering a comprehensive solution for time-traveling state and visualization without hindering existing functionalities. Setting up React Query Rewind in your development environment is as easy as:

  1. Install the NPM package as a development dependency:
    $ npm i react-query-rewind
  2. Import and add the React Query Rewind component inside of the TanStack Query Client. The closer to the Query Client the better React Query Rewind works!
Example code showing a prime location for implementing your ReactQueryRewind component

3. Install the Chrome Extension

4. Happy debugging!

Time Travel with Real-Time UI Updates

With React Query Rewind, users can seamlessly log state changes in their React applications. The extension allows you to effortlessly navigate through these logged states at your convenience. As you flip through different states, the user interface dynamically updates to display the corresponding current state, offering a streamlined way to inspect and understand the evolution of your application’s state over time.

Example of real-time UI updates

JSON Diffing Data

When examining state changes, users gain access to a dedicated tab presenting JSON data for each state. This tab provides a detailed breakdown of what elements have undergone modifications and what elements have remained unchanged in the specific state. It offers a comprehensive view, enabling users to discern the intricacies of alterations and continuities within their application’s state transitions.

Example showing JSON data

Component Tree

React Query Rewind illustrates the component hierarchy in real-time by navigating through the React fiber. It visually represents functional components as their state and props evolve, providing users with a clear depiction of the interconnections between components as changes occur over time.

Example showing component hierarchy tree

Want to contribute?

React Query Rewind values the strength of community involvement. If you’re enthusiastic about React Query, time-traveling state, or improving debugging experiences, your contributions are highly appreciated. Whether it’s code enhancements, documentation improvements, or innovative feature suggestions, your engagement can play a pivotal role in shaping the future of React Query Rewind.

Get Involved!

Eager to elevate the debugging capabilities of React Query? Explore our website, find us on LinkedIn, and dive into the React Query Rewind GitHub repository. Embark on this collaborative journey with us to empower developers and enhance the debugging landscape for React Query applications with React Query Rewind!

Meet The React Query Rewind Team

Behind React Query Rewind stands a team of passionate engineers united by a shared vision — to revolutionize the debugging experience for React Query users. Meet the engineers driving the development of React Query Rewind and the co-authors of this article, committed to making time-traveling state and comprehensive visualization an accessible and efficient reality for the React Query community.

Austin Cavanagh | LinkedIn | Github

Emma Teering | LinkedIn | Github

John Dunn | LinkedIn | Github

Rui Fan | LinkedIn | Github

--

--