v3.0.5

Fixed reporting of hooks about an inner WDYR component for hooks in non-memoized functional components

v3.0.4

• Added react-redux tests + demo
• When a React element is re-created as a property of another react element:
  • If it's props are different, ignore it.
  • if it's props are (deep or strict) equals, notify about the props + that the element shouldn't be re-created.
  • Updated + Added tests for this scenario
• Improved memoized functional components tracking performance
• Fixed memoized functional components and hooks reporting about an inner WDYR component.

v3.0.3

updated packages and readme

v3.0.2

fixed using of more then 2 hooks in a component

v3.0.1

improved hooks patching performance

React Hooks tracking is here!

Changes

• wdyr now tracks re-renders that are caused by React hooks!

you can read about it >> HERE <<

• titleColor / diffNameColor / diffPathColor - options now allow to change the colors of wdyr console notifications.

Added support to React.memo

Make sure to add whyDidYouRender on the component after wrapping it with React.memo and not before.

const ReactMemoTestComponent = React.memo(() => (
  <div>hi!</div>
))
ReactMemoTestComponent.whyDidYouRender = true
ReactMemoTestComponent.dispalyName = 'ReactMemoTestComponent'

Functional components tracking fix

We were tracking functional components props updates across all instances of it: #7.

This got fixed by saving prevProps on the component's ref.

Support extension of untranspiled classes

The bug #5, where people got Class constructors must be invoked with 'new' was identified as caused by extension of native "class" object types.

We added the targets:

  "main-no-classes-transpile": "dist/no-classes-transpile/cjs/whyDidYouRender.min.js",
  "module-no-classes-transpile": "dist/no-classes-transpile/esm/whyDidYouRender.min.js",
  "browser-no-classes-transpile": "dist/no-classes-transpile/umd/whyDidYouRender.min.js"

and now imports similar to

  const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js');

where classes are used without transpilation.

Also, upgraded all packages to their latest version, including rollup v1.1.0.

Support React.createFactory

• Updated all packages on development.
• Added tests and demos of React.cloneElement and React.createFactory.
• We found out React.createFactory skipped the monkey patch we apply on React.createElement thus the following code didn't work:

import {lifecycle} from 'recompose';

const PostsList = ({ posts }) => (
  <ul>{posts.map(p => <li>{p.title}</li>)}</ul>
);

const PostsListWithData = lifecycle({
  componentDidMount() {
    fetchPosts().then(posts => {
      this.setState({ posts });
    })
  }
})(PostsList);
PostsList.whyDidYouRender = true;

because lifecycle uses React.createFactory to create it's child which is PostsList in this case:
https://github.com/acdlite/recompose/blob/master/src/packages/recompose/lifecycle.js