Example Component: react-render-counter

RenderCounter is a tool component can be used in dev environment. It can tell you how many times each part of your component has been rendered.
This is composed with a HOC and a pure component to count render times
HOC is also useful when you want to track render times for your component.

Installation

yarn add --dev react-render-counter

or

npm install --save-dev react-render-counter

Usage

1. RenderCounter - withRenderCount(Counter)

import RenderCounter from 'react-render-counter';

<AnyComponent>
  <RenderCounter initialCount={0} />
</AnyComponent>

2. withRenderCount - High order component to provide data and logic

import { withRenderCount } from 'react-render-counter';

const MyCounter = ({ count }) => <div>{count + 1}</div>;

export default withRenderCount(MyCounter);

3. Counter - Pure component to render count

import { Counter } from 'react-render-counter';

<div>
  <Counter count={1} /> 
</div>

4. hocs - Some handy higher-order components.

// MyComponent.js
import withFoo from 'react-render-counter/hocs/withFoo';

const MyComponent = () => <div />;

export default withFoo(MyComponent);

// MyHoc.js
import compose from 'recompose/compose';
import withFoo from 'react-render-counter/hocs/withFoo';
import withBar from 'react-render-counter/hocs/withBar';

export default (fooOptions, barOptions) => compose(
  withFoo(fooOptions),
  withBar(barOptions),
);

Documentation

With storybook, things below are included in the site:

• online demo
• prop tables
• code examples
• TODO: comments

License

Copyright © 2017, Stupidism. Released under the MIT license.