10 React Developer Tools You Might Have Missed

Here’s a few tools you might have missed, out of my React tooling shortlist that deal with performance, visibility and debugging. Note that some of the more generic, less DOM dependent tools apply to React on React Native as well.

React Sight

React Sight is a React visualization tool with a live state and prop tree viewer that complements React devtools.

Reselect Devtools

Reselect devtools is a visualization tool for reselect which you can use to follow the caching layers.

Redux DevTools Profiler Monitor

Redux DevTools Profiler Monitor a cool way to start and stop a Javascript profile session, based on Redux action.

Periscope

Periscope is a timeline based monitoring for Redux actions.

redux-promise-middleware-times

mport { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import logTimes from 'redux-promise-middleware-times';


const store = createStore(thunk, promiseMiddleware(), logTimes());

redux-promise-middleware-times is a tiny addon to redux-promise-middleware that records time it took for async actions to happen.

redux-duplicate-actions

if (__DEV__) {
  // To throw a fatal error use the below:
  const reduxDuplicateActions = require('redux-duplicate-actions')(true)
  reduxMiddleware.push(reduxDuplicateActions)
  // To just show a warning:
  const reduxDuplicateActions = require('redux-duplicate-actions')(false)
  reduxMiddleware.push(reduxDuplicateActions)
}

redux-duplicate-actions detects duplicate actions (glitches in clicks, double action bugs, etc.) along the redux action stream.

should-component-update-dev

should-component-update-dev is another take on why-did-you-update where the integration point is swapping a component’s shouldComponentUpdate.

react-wastage-monitor

import React from 'react'
import ReactDOM from 'react-dom'
import ReactWastageMonitor from 'react-wastage-monitor'
if (process.env.NODE_ENV !== 'production') {
  ReactWastageMonitor(React, ReactDOM)
}

react-wastage-monitor is yet another take on why-did-you-update, where there’s support to detect whether DOM updated or not.

React Monocle

react-monocle is a powerful React visualization that takes the source code components, runtime components and their state, and your redux state and fuses all together.

react-component-benchmark

<Benchmark
          component={MyComponent}
          componentProps={componentProps}
          onComplete={this._handleComplete}
          ref={this._setBenchRef}
          samples={50}
          timeout={10000}
          type={BenchmarkType.MOUNT}
        />

react-component-benchmark is a convenient and declarative component-based benchmarking tool that you can use to benchmark components and entire trees of components. Also check out fuego which seems to be the same thing with a different API.

One more thing

Hygen is a code generator framework you can use in any project to reduce boilerplate. This is painfully evident for React and Redux, where the amount of boilerplate (for good reasons) can be overwhelming. For example, you can generate a component, a test, a storybook, and documentation every time you want a new component:

$ hygen component new --name avatar