feat/why-did-you-render: integration and fixes

.gitignore

@@ -29,6 +29,8 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env.be.auth
+.env.my.auth
 
 # vercel
 .vercel

components/Button/Button.tsx

@@ -21,5 +21,5 @@ const Button: React.FunctionComponent<ButtonProps> = ({
     </button>
   );
 };
-
+Button.whyDidYouRender = false;
 export default Button;

components/DarkMode/DarkMode.tsx

@@ -18,5 +18,5 @@ const DarkMode: React.FunctionComponent = () => {
     </button>
   );
 };
-
+DarkMode.whyDidYouRender = false;
 export default DarkMode;

components/FollowedArtistList/FollowedArtistList.tsx

@@ -90,5 +90,5 @@ const FollowedArtistList: React.FunctionComponent<ListProps> = ({ i18n }) => {
     </div>
   );
 };
-
+FollowedArtistList.whyDidYouRender = false;
 export default FollowedArtistList;

components/Footer/Footer.tsx

@@ -31,5 +31,5 @@ const Footer: React.FunctionComponent<FooterProps> = ({ i18n }) => {
     </footer>
   );
 };
-
+Footer.whyDidYouRender = true;
 export default Footer;

components/Header/Header.tsx

@@ -17,5 +17,5 @@ const Header: React.FunctionComponent = () => {
     </header>
   );
 };
-
+Header.whyDidYouRender = true;
 export default Header;

components/Login/Login.tsx

@@ -17,5 +17,5 @@ const Login: React.FunctionComponent<LoginProps> = ({ i18n }) => {
     </div>
   );
 };
-
+Login.whyDidYouRender = false;
 export default Login;

components/Main/Main.tsx

@@ -37,5 +37,5 @@ const Main: React.FunctionComponent<MainProps> = ({ i18n }) => {
     </main>
   );
 };
-
+Main.whyDidYouRender = false;
 export default Main;

components/Meta/Meta.tsx

@@ -10,5 +10,5 @@ const Meta: React.FunctionComponent = () => {
     </Head>
   );
 };
-
+Meta.whyDidYouRender = false;
 export default Meta;

components/Search/Search.tsx

@@ -89,5 +89,5 @@ const Search: React.FunctionComponent<SearchProps> = ({ i18n }) => {
     </div>
   );
 };
-
+Search.whyDidYouRender = false;
 export default Search;

contexts/ThemeContext.tsx

@@ -9,7 +9,7 @@ interface ThemeContextType {
 export const ThemeContext = createContext<ThemeContextType>({
   dark: true,
   loaded: true,
-  setDark: () => {},
+  setDark: () => {}, // TODO check default
 });
 ThemeContext.displayName = 'ThemeContext';
 

contexts/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
+import { FC, ReactElement, useEffect, useMemo, useState } from 'react';
 import { ThemeContext } from './ThemeContext';
 
 const isWindow = () => typeof window !== 'undefined';
@@ -11,6 +11,7 @@ const ThemeProvider: FC<ChildrenProps> = ({ children }) => {
   const [dark, setDark] = useState<boolean>(isWindow() && localStorage.theme);
   const [loaded, setLoaded] = useState(false);
 
+  const value = useMemo(() => ({ dark, loaded, setDark }), [dark, loaded]);
   useEffect(() => setLoaded(true), []);
 
   useEffect(() => {
@@ -23,9 +24,9 @@ const ThemeProvider: FC<ChildrenProps> = ({ children }) => {
       root.classList.remove('dark');
       isWindow() && localStorage.removeItem('theme');
     }
-  }, [dark, setDark]);
+  }, [dark]);
 
-  return <ThemeContext.Provider value={{ dark, loaded, setDark }}>{children}</ThemeContext.Provider>;
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 };
 
 export default ThemeProvider;

next.config.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
@@ -11,4 +13,21 @@ module.exports = {
   env: {
     BE_BASE_URL: process.env.BE_BASE_URL,
   },
+  // https://github.com/vercel/next.js/tree/canary/examples/with-why-did-you-render
+  webpack(config, { dev, isServer }) {
+    if (dev && !isServer) {
+      const originalEntry = config.entry;
+      config.entry = async () => {
+        const wdrPath = path.resolve(__dirname, './scripts/wdyr.js');
+        const entries = await originalEntry();
+
+        if (entries['main.js'] && !entries['main.js'].includes(wdrPath)) {
+          entries['main.js'].push(wdrPath);
+        }
+        return entries;
+      };
+    }
+
+    return config;
+  },
 };

package.json

@@ -24,6 +24,7 @@
     "@types/node": "17.0.35",
     "@types/react": "18.0.9",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@welldone-software/why-did-you-render": "^7.0.1",
     "autoprefixer": "^10.4.7",
     "eslint": "8.16.0",
     "eslint-config-next": "12.1.6",

pages/_app.page.tsx

@@ -1,3 +1,4 @@
+import '../scripts/wdyr';
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { UserProvider } from '@auth0/nextjs-auth0';

scripts/wdyr.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+/// <reference types="@welldone-software/why-did-you-render" />
+if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+    trackHooks: true,
+    logOwnerReasons: true,
+  });
+}

yarn.lock

@@ -1124,6 +1124,13 @@
     "@typescript-eslint/types" "5.26.0"
     eslint-visitor-keys "^3.3.0"
 
+"@welldone-software/why-did-you-render@^7.0.1":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@welldone-software/why-did-you-render/-/why-did-you-render-7.0.1.tgz#09f487d84844bd8e66435843c2e0305702e61efb"
+  integrity sha512-Qe/8Xxa2G+LMdI6VoazescPzjjkHYduCDa8aHOJR50e9Bgs8ihkfMBY+ev7B4oc3N59Zm547Sgjf8h5y0FOyoA==
+  dependencies:
+    lodash "^4"
+
 abab@^2.0.5, abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -3577,7 +3584,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash@^4.17.15:
+lodash@^4, lodash@^4.17.15:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==