welldone-software/why-did-you-render

How to use in CRA(5.0.0) React17.0.1

Open

#231 opened on Jan 26, 2022

View on GitHub
 (13 comments) (6 reactions) (0 assignees)JavaScript (10,560 stars) (188 forks)batch import
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"));

Contributor guide