why-did-you-render

• updated all dev packages.
• minor refactor of inner code where patching of different react component types moved to it's own folder.
  • also split the main testing file between these patches.
• added support to React.forwardRef.
• added support to React.memo(React.forwardRef. (thanks to @jared-hexagon who filed a great bug report)
• added support to React.forwardRef(React.memo but turns out React itself doesn't supports it.
• everything is covered by tests.

• fixed renderToStaticMarkup
• updated readme and console log phrasing
• updated all packages

Minor error reporting improvement by @jared-hexagon. Thanks!

A contribution of @leroydev
Thank you!

handled classes throwing false positives in StrictMode (https://github.com/welldone-software/why-did-you-render/issues/16)

handled binded render functions this.render.bind(this) in constructor

Mostly to fix a security vulnerability github found in the project

v3.0.8 had unintended braking change to the CJS version where the require was an object that consisted of default and defaultNotifier so it had to be used like this:

whyDidYouRender.default(React) // unintended 3.0.8 use that has been fixed.

This is fixed in v3.0.9.
defaultNotifier is exported on the whyDidYouRender instead and the CJS library version can be used like this again:

whyDidYouRender(React);
const defaultNotifier = whyDidYouRender.defaultNotifier;

• updated dev dependencies
• now exporting defaultNotifier (thanks @JoelBrenstrum)

unintended braking changes. see v3.0.9 above

minor fix-
react inspect of components with hooks won't crash anymore

Updated demos, examples, tests, and readme

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

• 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.

updated packages and readme

fixed using of more then 2 hooks in a component

improved hooks patching performance

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.

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'

We were tracking functional components props updates across all instances of it: https://github.com/welldone-software/why-did-you-render/issues/7.

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

The bug https://github.com/welldone-software/why-did-you-render/issues/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.

• 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