welldone-software/why-did-you-render
View on GitHubHow to use in CRA(5.0.0) React17.0.1
Open
#231 opened on Jan 26, 2022
help wantedquestion
Description
I tried a lot of ways,but it dosen't show any information in console. I don't know what's wrong.
import { times } from "lodash";
import React from "react";
import ReactDOM from "react-dom";
import whyDidYouRender from "@welldone-software/why-did-you-render";
if (process.env.NODE_ENV === 'development') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
trackAllPureComponents: true,
});
}
class BigListPureComponent extends React.PureComponent {
static whyDidYouRender = true;
render() {
console.log(
"BigListPureComponent Re-Render! - We don't want to get here too often."
);
return (
<div style={this.props.style}>
<h2>BigListPureComponent</h2>
<div>
{times(3000).map((n) => (
<div key={n}>Element #{n}</div>
))}
</div>
</div>
);
}
}
const bigListStyle = { width: "100%" }; // eslint-disable-line no-unused-vars
// Notice, that unlike the huge list, we don't track Main's re-renders because we don't care about it's re-renders.
class Main extends React.Component {
state = { count: 0 };
render() {
return (
<div
style={{
height: "100%",
width: "100%",
display: "flex",
flexDirection: "column"
}}
>
<h1>Big List (Main Demo)</h1>
<p>
{
'Open the console and notice how the heavy list re-renders on every click on "Increase!" even though it\'s props are the same.'
}
</p>
<div>
<button
onClick={() => {
this.setState({ count: this.state.count + 1 });
}}
>
Increase!
</button>
</div>
<div>
<span>Count: {this.state.count}</span>
</div>
<BigListPureComponent style={{ width: "100%" }} />
<BigListPureComponent />
</div>
);
}
}
ReactDOM.render(<Main />, document.getElementById("root"));