Skip to content
Get packs

Guide · Open source

How to use Reactotron: setup, features and debugging tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

Reactotron is a desktop app for inspecting React and React Native projects. You add a small client library to your app as a dev dependency, and the app shows application state, network requests, performance benchmarks and console-style messages in a separate window. This guide explains what Reactotron does, how to get the app, how to connect your project, and where it fits compared with other debugging tools.

Reactotroninfinitered/reactotron · ★ 15.6k · MIT

Quick start

  1. 1Get the app. Download the latest reactotron-app release from the project's Releases page for your operating system.
  2. 2Open the quick-start guide. Choose the React Native or React quick-start guide from the Reactotron documentation, depending on your project.
  3. 3Add the client as a dev dependency. Install the Reactotron client library in your app as a dev dependency so it stays out of production builds.
  4. 4Start the desktop app. Open Reactotron and run your app so the two can connect.
  5. 5Inspect state and requests. Use the state, networking and console-style message views to watch what your app is doing.
  6. 6Explore plugins. Enable the plugins you need, such as Redux, Async Storage or benchmarks, from the documentation.

What Reactotron does

Reactotron is a debugger for React and React Native applications. It lets you monitor your application's state, network requests and performance metrics from one interface.

The project describes its use for projects of any size, from small personal apps to large-scale applications. It is also used at Infinite Red to build client apps.

  • View your application state
  • Show API requests and responses
  • Perform quick performance benchmarks
  • Display messages similar to console.log
  • Track global errors with source-mapped stack traces
  • Hot swap your app's state using Redux or mobx-state-tree
  • Track your Async Storage in React Native

Install the Reactotron desktop app on macOS, Linux or Windows

The desktop app is downloaded from the Releases page of the project. Look for the latest release named reactotron-app and choose the build for your system.

The README lists builds for macOS (x64 and arm64), Linux (32-bit and 64-bit) and Windows (32-bit and 64-bit). The README's only command is a clone of the repository, which is useful if you want the source.

  • Open the Releases page of the infinitered/reactotron repository
  • Select the latest reactotron-app release
  • Download the build for macOS, Linux or Windows
git clone https://github.com/infinitered/reactotron

Connect your React or React Native project

Reactotron works by adding a client library to your app as a dev dependency. The README links separate quick-start guides for React Native and React, which show how to set up the client in each kind of project.

Because it is a dev dependency, the README states it adds nothing to your production builds.

  • Use the React Native quick-start guide for React Native apps
  • Use the React JS quick-start guide for React web apps
  • Keep Reactotron as a dev dependency so it stays out of production

Use the plugins to inspect your app

Reactotron's features are provided as plugins. The README lists plugins for global errors, global logs, networking, Async Storage, React Native MMKV, benchmarks, apisauce, the overlay, MST, Redux and Open in Editor, plus Storybook for React Native and Custom Commands.

If you use Redux, the Redux plugin lets you inspect and dispatch actions. The Storybook plugin is only for React Native and lets you switch to Storybook from the Reactotron app.

  • Track Global Errors and Track Global Logs for errors and console-style output
  • Networking and apisauce for API requests and responses
  • Async Storage and React Native MMKV for stored data in React Native
  • Benchmark for quick performance measurements
  • Redux and MST for state inspection

Report bugs with the example app

When reporting a problem with Reactotron, the README asks you to reproduce it using the example app in app/example-app. This helps the maintainers isolate and fix the issue faster.

For React Native problems on iOS or Android, the README links to a troubleshooting page with sections for each platform.

  • Reproduce the issue in app/example-app before filing a report
  • Check the troubleshooting section for React Native iOS and Android

What people use it for

  • Watching application state change while you debug a React Native screen
  • Inspecting API requests and responses from a networked app
  • Dispatching Redux actions to test how state responds
  • Reading console-style messages and global error traces in a separate window
  • Running quick performance benchmarks on parts of your app

Frequently asked questions

Is Reactotron free?

Yes. The README says Reactotron is completely open source and free to use, and the repository is licensed under the MIT license.

Which operating systems does Reactotron support?

The desktop app is listed for macOS (x64 and arm64), Linux (32-bit and 64-bit) and Windows (32-bit and 64-bit). Download the matching build from the Releases page.

Does Reactotron work with plain React or only React Native?

The README links quick-start guides for both React Native and React JS. Storybook integration is listed as only for React Native.

Will Reactotron affect my production build?

The README says you add it as a dev dependency, so it adds nothing to production builds.

What is the difference between Reactotron and Redux DevTools or Flipper?

Redux DevTools focuses on Redux state, Flipper is a general debugging platform, and React Developer Tools inspects React component trees. Reactotron combines state, network, benchmarks and console-style messages in one app that requires a client library in your project.

Can I use Reactotron if I can't add a dependency to my project?

Not as described in the source. Reactotron requires adding a client library as a dev dependency, so teams that cannot do that should use a browser devtools workflow or another tool.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Reactotron suits React and React Native developers who want state, network calls and console-style messages in a separate window, especially on Redux-based apps. Skip it if you only need browser devtools, cannot add a dev dependency, or need production monitoring.

Install options & downloads