why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
MIT License
Bot releases are hidden (Show)
Published by vzaidman about 5 years ago
React.forwardRef
.React.memo(React.forwardRef
. (thanks to @jared-hexagon who filed a great bug report)React.forwardRef(React.memo
but turns out React
itself doesn't supports it.Published by vzaidman over 5 years ago
A contribution of @leroydev
Thank you!
Published by vzaidman over 5 years ago
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
Published by vzaidman over 5 years ago
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;
Published by vzaidman over 5 years ago
you can read about it >> HERE <<
titleColor / diffNameColor / diffPathColor
- options now allow to change the colors of wdyr console notifications.Published by vzaidman over 5 years ago
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'
Published by vzaidman over 5 years ago
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.
Published by vzaidman over 5 years ago
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
.
Published by vzaidman almost 6 years ago
React.cloneElement
and React.createFactory
.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