# Reactotron — Desktop Debugging App for React and React Native

> Reactotron is an open-source desktop application for inspecting React JS and React Native projects. It provides real-time monitoring of state changes, API requests, performance benchmarks, and custom log events across macOS, Linux, and Windows.

## Install

Save in your project root:

# Reactotron — Desktop Debugging App for React and React Native

## Quick Use
```bash
# Install the client in your React Native project
npm install --save-dev reactotron-react-native
# For React web projects
npm install --save-dev reactotron-react-js
# Download the Reactotron desktop app from GitHub releases
# Connect your app and start debugging
```

## Introduction
Reactotron is a desktop debugging tool maintained by Infinite Red that connects to your React or React Native application over a WebSocket. It gives you a live feed of state changes, network requests, and custom events without cluttering your browser DevTools or terminal.

## What Reactotron Does
- Displays real-time Redux, MobX, and MobX-State-Tree state changes
- Logs API requests and responses with timing information
- Shows async storage operations for React Native
- Provides performance benchmarking and overlay tools
- Supports custom commands and log events from your application

## Architecture Overview
Reactotron consists of two parts: a desktop app built with Electron and client libraries for React and React Native. The client library integrates with your app via plugins (Redux, networking, async storage) and sends events over a WebSocket connection to the desktop app. The desktop app renders a timeline of events with filtering, search, and state snapshots. Plugins are modular, so you only include what you need.

## Self-Hosting & Configuration
- Download the desktop app for macOS, Linux, or Windows from GitHub releases
- Install the appropriate client package (reactotron-react-native or reactotron-react-js)
- Create a ReactotronConfig file to configure plugins and connection settings
- Initialize Reactotron before your app renders, typically in an index or config file
- Use environment checks to disable Reactotron in production builds

## Key Features
- Live timeline of state changes, API calls, and custom events
- State snapshots let you view and restore previous application states
- Built-in benchmarking tools for measuring render and function performance
- Plugin architecture supporting Redux, Saga, MobX, and async storage
- Custom commands let you trigger actions in your app from the desktop

## Comparison with Similar Tools
- **React DevTools** — Inspects component tree; Reactotron focuses on state and network events
- **Flipper** — Meta's mobile debugger (now archived); Reactotron remains actively maintained
- **Redux DevTools** — Browser extension for Redux only; Reactotron covers broader debugging
- **React Native Debugger** — Combines Chrome DevTools with React; heavier, less focused
- **Sentry** — Production error tracking; Reactotron is for development-time debugging

## FAQ
**Q: Does Reactotron work with Expo?**
A: Yes. Reactotron works with Expo projects. Install the React Native client and configure it in your app entry point.

**Q: Can I use Reactotron without Redux?**
A: Yes. Reactotron works independently of Redux. You can use it for API monitoring, logging, and benchmarking without any state management library.

**Q: Does Reactotron affect production performance?**
A: No, if configured correctly. Wrap Reactotron initialization in a development-only check so it is tree-shaken from production builds.

**Q: Is Reactotron still maintained?**
A: Yes. Reactotron is actively maintained by Infinite Red with regular updates and community contributions.

## Sources
- https://github.com/infinitered/reactotron
- https://docs.infinite.red/reactotron/

---
Source: https://tokrepo.com/en/workflows/asset-8818845a
Author: AI Open Source