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 (188 forks)batch import
help wantedquestion

Repository metrics

Stars
 (10,560 stars)
PR merge metrics
 (No merged PRs in 30d)

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