Package Exports

storybook-addon-react-renders

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (storybook-addon-react-renders) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Storybook React Renders Addon

🔍 Storybook addon to help you identify and inspect potential wasted renders of React components.

Check out the Live Storybook demo.

Description

Why-did-you-update by maicki is an awesome tool to notify you of potential wasted re-renders by your React components.

However, it requires you to monkey patch your React in development stage and blasts everything to the console.

This library turns it into a storybook addon and redirects all the log events into the storybook panel for you to inspect.

Features

🔥 Shows when potential wasted re-renders happen in your React components.
🔍 Allows to inspect the state and props before and after the re-render.
❗️ Notifies you of events while running on the background.
⚡️ Creates powerful integrations with Storybook addons (like knobs).
🔧 Configurable in different ways to filter events and objects to what's interesting to you.
👍 Seperates it from your production code.
⛏ Maintained.

Getting Started

Installation

$ npm install --save-dev storybook-addon-react-renders

$ yarn add --dev storybook-addon-react-renders

Register

import "storybook-addon-react-renders/register";

Usage

To globally use this addon across all your stories, add it as a decorator to your .storybook/config.js file.

import { configure, addDecorator } from "@storybook/react";
import { withRenders } from "storybook-addon-react-renders";

addDecorator(withRenders);

Or add it on an indivual basis to your stories.

// A stories file
import { withRenders } from "storybook-addon-react-renders";

storiesOf("A story with renders addon", module)
  .addDecorator(withRenders)
  .add("story title", <StoryComponent />, {
    renders: {
      // Options
    }
  });

Options

Configuration parameters can be set at 3 different locations: passed as default options along the addDecorator call, passed as an object of parameters to a book of stories to the addParameters call, and passed as direct parameters to each individual story with the renders key (see the last example in usage).

{
  /**
   * Whether to display events with empty incoming objects.
   * @default true
   */
  showEmptyEvents: boolean,
  /**
   * List of event types to exclude.
   * @default []
   */
  excludeEventTypes: Array<"props" | "state">,
  /**
   * A list of keys to filter the incoming objects of the events. Unless empty, only these keys will be shown in the objects.
   * @default []
   */
  filterEventKeys: Array<String>,
  /**
   * A list of components of which the events will not be displayed in the storybook panel.
   * @default []
   */
  excludeComponents: Array<String>,
  /**
   * Whether to show the amount of new renders events in the panel title.
   * @default false
   */
  disableNotificationsNumber: boolean
}

Contributing

Ideas and contributions are welcome! 🎉

storybook-addon-react-renders