babel-react-render-defender
v1.1.1
Published
Babel render defender
Downloads
26
Keywords
Readme
Babel React Render Defender
Babel preset for react-render-defender.
What does it do?
React Render Defender lets you know when any React component has rendered twice in less than 200ms. This helps you find components which render when they really shouldn't. If a component has rendered twice in the specified time, you will see a message in the console like this:
Install
$ npm install --save-dev babel-react-render-defender
Usage
You should add this preset only for development.
Via .babelrc
.babelrc
{
"presets": ["babel-react-render-defender"]
}
Via webpack.config.js
Example of webpackConfig file
webpackConfig.module.loaders = [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory: true,
presets: __DEV__
? ['es2015', 'react', 'stage-0', 'react-hmre', 'babel-react-render-defender']
: ['es2015', 'react', 'stage-0']
}
},
Additional Settings
The default threshold is 200ms. If you want to change it or go into quiet mode, do the following:
- In your root directory create a file called:
rdefender.json
- In your file specify the constructor name of the component of which you want to change the threshold:
{
"LogCallForm" : 200
}
- If you want to go into 'quiet mode' for a little while, add
"quiet_mode": true
to the file (don't forget to remove it when you are done with your heavy debugging):
{
"LogCallForm" : 200,
"quiet_mode": true
}
Thanks to Alex Nudelman & Boris Nadion for their help. Developed as part of my work in Samanage.