A visual way to see what is (re)rendering and why.
- Shows when component is being mounted or updated by highlighting (red for mount, yellow for update)
- Shows render count for each component instance
- Shows individual render log for each component instance
npm install react-render-visualizer
This is a mixin so once you've included the source code, simply mix it in to any react component you want to start monitoring.
E.g.
var ReactRenderVisualizer = require("react-render-visualizer");
app.TodoItem = React.createClass({
mixins: [ReactRenderVisualizer],
Component will show up with a blue border box when being monitored