Add why-did-you-render

Author: devmagazinepodcast

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  plugins: ['react-hooks'],
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'react/prop-types': 0,
+  },
+  parserOptions: {
+    ecmaVersion: 9,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+      experimentalObjectRestSpread: true,
+      experimentalArrayRestSpread: true,
+    },
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+}

package.json

@@ -1,12 +1,15 @@
 {
-  "name": "react-template-empty",
+  "name": "react-optimization-hooks",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@welldone-software/why-did-you-render": "^4.2.5",
     "bootstrap": "^4.5.0",
+    "eslint": "^7.4.0",
+    "eslint-plugin-react": "^7.20.3",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",

src/index.js

@@ -1,3 +1,5 @@
+import './wdyr'
+
 import React from 'react'
 import ReactDOM from 'react-dom'
 import 'bootstrap/dist/css/bootstrap.min.css'

src/wdyr.js

@@ -0,0 +1,8 @@
+import React from 'react'
+
+if (process.env.NODE_ENV === 'development') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render')
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+  })
+}