Render visualizer for ReactJS
Switch branches/tags
Clone or download
redsunsoft Merge pull request #6 from itszero/bugfix/react_013
various bugfixes & React 0.13 compatibility
Latest commit 6fba990 Aug 22, 2016

README.md

React Render Visualizer

A visual way to see what is (re)rendering and why.

Features

  • 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

Installation

npm install react-render-visualizer

Usage

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

Demo

demo