10 React Developer Tools You Might Have Missed

Dotan Nahum
Jan 10, 2018 · 3 min read

React Sight


Reselect Devtools


Redux DevTools Profiler Monitor


Periscope


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-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)
}

should-component-update-dev


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 Monocle


react-component-benchmark

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

One more thing

$ hygen component new --name avatar

Dotan Nahum

Written by

@jondot | CTO at HiredScore. ex-CTO at Como. Hacker. Fullstacker. Big data. Open sourcer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade