Reactotron: debugging tool for React & React Native
Tags: reactnative, react, javascript
Published: 2024-05-18 05:27:07

Hey devs!

Have you heard about Reactotron? Reactotron is a powerful tool for developing and debugging React Native (and also ReactJS) applications. Developed by Infinite Red, Reactotron provides a desktop interface to monitor and interact with applications in real-time, making it easier to identify and resolve issues during development. Let's explore its main features and how to set it up for a React Native project.

## Main Features of Reactotron

1. **State Monitoring**
    - **Description:** Visualizes Redux state and state changes over time.
    - **Benefits:** Makes it easier to track changes in the global state and identify state management issues.

2. **Logging**
    - **Description:** Displays custom logs directly in the Reactotron interface.
    - **Benefits:** Replaces the traditional console.log, allowing for a more organized and filtered view of logs.

3. **Redux Action Monitoring**
    - **Description:** Visualizes dispatched Redux actions and their payloads.
    - **Benefits:** Helps verify that actions are dispatched correctly and that data is transmitted as expected.

4. **Performance Tracking**
    - **Description:** Measures the performance of specific components and functions.
    - **Benefits:** Identifies performance bottlenecks and areas that need optimization.

5. **API Requests/Responses Control**
    - **Description:** Monitors API requests and responses in real-time.
    - **Benefits:** Facilitates debugging network issues, such as failed requests or unexpected responses.

6. **Remote State Control**
    - **Description:** Allows modifying the application's state remotely.
    - **Benefits:** Tests different state scenarios without changing the code or restarting the application.

7. **Snapshots**
    - **Description:** Captures the application state at a specific point in time.
    - **Benefits:** Compares current states with past states to identify unwanted changes or bugs.

## Setting Up Reactotron in React Native
Here are the steps to set up Reactotron in a React Native project:

**Step 1: Install Dependencies**
First, install the necessary dependencies:

```bash
yarn add reactotron-react-native
yarn add -D reactotron-redux reactotron-react-native
```

**Step 2: Configure Reactotron**
Create or edit the ReactotronConfig.js file in your project:

```javascript
// ReactotronConfig.js
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import { reactotronReactNative } from 'reactotron-react-native';

Reactotron
  .configure({ name: 'React Native Demo' }) // Application name
  .useReactNative() // Adds all built-in React Native plugins
  .use(reactotronRedux()) // Redux plugin
  .connect(); // Connect to Reactotron

// Export the configured Reactotron
export default Reactotron;
```

**Step 3: Configure the App to Use Reactotron**
Edit the index.js file to use Reactotron during development:

```javascript
// index.js
import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

// Import and configure Reactotron during development only
if (__DEV__) {
  import('./ReactotronConfig').then(() => console.log('Reactotron Configured'));
}

AppRegistry.registerComponent(appName, () => App);
```

**Step 4: Configure Redux (if applicable)**
If you are using Redux, configure the store to use Reactotron:

```javascript
// store.js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import Reactotron from './ReactotronConfig';
import rootReducer from './reducers';

// Store configuration with Reactotron
const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(...middleware),
    Reactotron.createEnhancer()
  )
);

export default store;
```

## Using Reactotron


**Logging**
You can use Reactotron to log debug messages instead of using console.log:

```javascript
import Reactotron from 'reactotron-react-native';

Reactotron.log('Hello, Reactotron!');
```

You can cut out the top step by attaching to the console object in your ReactotronConfig.js file (or wherever you setup).

```javascript
// horrible, but useful hack.... oh come on, don't look at me like that... it's JavaScript :|
console.tron = Reactotron
```

Now, anywhere in your app if you want to log something?

```javascript
console.tron.log("Sweet Freedom!")
```

**Redux Action Monitoring**
Reactotron will automatically monitor Redux actions if you have configured reactotronRedux correctly.

**API Request Monitoring**
Configure API requests to be monitored:

```javascript
// api.js
import axios from 'axios';
import Reactotron from 'reactotron-react-native';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

api.interceptors.request.use(request => {
  Reactotron.apiLog(request);
  return request;
});

api.interceptors.response.use(response => {
  Reactotron.apiLog(response);
  return response;
});

export default api;
```

## Benefits of Using Reactotron
1. **Simplified Debugging:**
    - Makes it easier to identify problems without multiple console.log statements.
2. **Real-time Monitoring:**
    - Monitors state, actions, and API requests in real-time.
3. **Performance Improvement:**
    - Identifies bottlenecks and optimizes specific components and functions.
4. **Redux Integration:**
    - Monitors and interacts with Redux state directly from Reactotron.


Reactotron is an essential tool for React Native developers looking to improve development efficiency and code quality. By integrating Reactotron, you can gain valuable insights into the application's behavior and resolve issues more quickly and effectively.