From 91254d0fbd74361a01216d6951b07534170c90a2 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Wed, 31 Aug 2022 22:14:32 +0800
Subject: [PATCH] feat: add why-did-you-render

---
 config/webpack.config.js | 4 +++-
 package.json             | 1 +
 src/index.tsx            | 1 +
 src/wdyr.ts              | 9 +++++++++
 yarn.lock                | 9 ++++++++-
 5 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 src/wdyr.ts

diff --git a/config/webpack.config.js b/config/webpack.config.js
index d30665cd..b2fc1ad1 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -317,7 +317,9 @@ module.exports = function (webpackEnv) {
                   [
                     require.resolve("babel-preset-react-app"),
                     {
-                      runtime: hasJsxRuntime ? "automatic" : "classic"
+                      runtime: hasJsxRuntime ? "automatic" : "classic",
+                      development: process.env.NODE_ENV === "development",
+                      importSource: "@welldone-software/why-did-you-render"
                     }
                   ]
                 ],
diff --git a/package.json b/package.json
index 890c5d3c..459738f8 100644
--- a/package.json
+++ b/package.json
@@ -131,6 +131,7 @@
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.36.0",
     "@typescript-eslint/parser": "^5.36.0",
+    "@welldone-software/why-did-you-render": "^7.0.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
diff --git a/src/index.tsx b/src/index.tsx
index f6afb45b..f55afa1a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,3 +1,4 @@
+import "./wdyr";
 import ReactDOM from "react-dom/client";
 import toast, { Toaster } from "react-hot-toast";
 import { Reset } from "styled-reset";
diff --git a/src/wdyr.ts b/src/wdyr.ts
new file mode 100644
index 00000000..95e7d29b
--- /dev/null
+++ b/src/wdyr.ts
@@ -0,0 +1,9 @@
+/// <reference types="@welldone-software/why-did-you-render" />
+import React from "react";
+
+if (process.env.NODE_ENV === "development") {
+  const whyDidYouRender = require("@welldone-software/why-did-you-render");
+  whyDidYouRender(React, {
+    trackAllPureComponents: true
+  });
+}
diff --git a/yarn.lock b/yarn.lock
index 236ad0ee..18a263f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3955,6 +3955,13 @@
     "@webassemblyjs/ast" "1.11.1"
     "@xtuc/long" "4.2.2"
 
+"@welldone-software/why-did-you-render@^7.0.1":
+  version "7.0.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/@welldone-software%2fwhy-did-you-render/-/why-did-you-render-7.0.1.tgz#09f487d84844bd8e66435843c2e0305702e61efb"
+  integrity sha512-Qe/8Xxa2G+LMdI6VoazescPzjjkHYduCDa8aHOJR50e9Bgs8ihkfMBY+ev7B4oc3N59Zm547Sgjf8h5y0FOyoA==
+  dependencies:
+    lodash "^4"
+
 "@xobotyi/scrollbar-width@^1.9.5":
   version "1.9.5"
   resolved "https://mirrors.cloud.tencent.com/npm/@xobotyi%2fscrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
@@ -8422,7 +8429,7 @@ lodash.uniq@^4.5.0:
   resolved "https://mirrors.cloud.tencent.com/npm/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://mirrors.cloud.tencent.com/npm/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==