diff --git a/.gitignore b/.gitignore
index 38227b0..29422f3 100644
--- a/.gitignore
+++ b/.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
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
index 9343f68..8be9118 100644
--- a/components/Button/Button.tsx
+++ b/components/Button/Button.tsx
@@ -21,5 +21,5 @@ const Button: React.FunctionComponent<ButtonProps> = ({
     </button>
   );
 };
-
+Button.whyDidYouRender = false;
 export default Button;
diff --git a/components/DarkMode/DarkMode.tsx b/components/DarkMode/DarkMode.tsx
index 66a2b51..817aa7d 100644
--- a/components/DarkMode/DarkMode.tsx
+++ b/components/DarkMode/DarkMode.tsx
@@ -18,5 +18,5 @@ const DarkMode: React.FunctionComponent = () => {
     </button>
   );
 };
-
+DarkMode.whyDidYouRender = false;
 export default DarkMode;
diff --git a/components/FollowedArtistList/FollowedArtistList.tsx b/components/FollowedArtistList/FollowedArtistList.tsx
index 47f29c3..f7cba80 100644
--- a/components/FollowedArtistList/FollowedArtistList.tsx
+++ b/components/FollowedArtistList/FollowedArtistList.tsx
@@ -90,5 +90,5 @@ const FollowedArtistList: React.FunctionComponent<ListProps> = ({ i18n }) => {
     </div>
   );
 };
-
+FollowedArtistList.whyDidYouRender = false;
 export default FollowedArtistList;
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index abf8d4b..e461304 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -31,5 +31,5 @@ const Footer: React.FunctionComponent<FooterProps> = ({ i18n }) => {
     </footer>
   );
 };
-
+Footer.whyDidYouRender = true;
 export default Footer;
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index de5f0f4..bba8e65 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -17,5 +17,5 @@ const Header: React.FunctionComponent = () => {
     </header>
   );
 };
-
+Header.whyDidYouRender = true;
 export default Header;
diff --git a/components/Login/Login.tsx b/components/Login/Login.tsx
index 9faa5c8..8953962 100644
--- a/components/Login/Login.tsx
+++ b/components/Login/Login.tsx
@@ -17,5 +17,5 @@ const Login: React.FunctionComponent<LoginProps> = ({ i18n }) => {
     </div>
   );
 };
-
+Login.whyDidYouRender = false;
 export default Login;
diff --git a/components/Main/Main.tsx b/components/Main/Main.tsx
index 281e616..beec0d7 100644
--- a/components/Main/Main.tsx
+++ b/components/Main/Main.tsx
@@ -37,5 +37,5 @@ const Main: React.FunctionComponent<MainProps> = ({ i18n }) => {
     </main>
   );
 };
-
+Main.whyDidYouRender = false;
 export default Main;
diff --git a/components/Meta/Meta.tsx b/components/Meta/Meta.tsx
index e9992ec..6635f91 100644
--- a/components/Meta/Meta.tsx
+++ b/components/Meta/Meta.tsx
@@ -10,5 +10,5 @@ const Meta: React.FunctionComponent = () => {
     </Head>
   );
 };
-
+Meta.whyDidYouRender = false;
 export default Meta;
diff --git a/components/Search/Search.tsx b/components/Search/Search.tsx
index c95cded..4604b69 100644
--- a/components/Search/Search.tsx
+++ b/components/Search/Search.tsx
@@ -89,5 +89,5 @@ const Search: React.FunctionComponent<SearchProps> = ({ i18n }) => {
     </div>
   );
 };
-
+Search.whyDidYouRender = false;
 export default Search;
diff --git a/contexts/ThemeContext.tsx b/contexts/ThemeContext.tsx
index ee55f1f..f5862b7 100644
--- a/contexts/ThemeContext.tsx
+++ b/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';
 
diff --git a/contexts/ThemeProvider.tsx b/contexts/ThemeProvider.tsx
index d135207..1203516 100644
--- a/contexts/ThemeProvider.tsx
+++ b/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;
diff --git a/next.config.js b/next.config.js
index f63d28d..388b8bf 100644
--- a/next.config.js
+++ b/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;
+  },
 };
diff --git a/package.json b/package.json
index a275793..fba9491 100644
--- a/package.json
+++ b/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",
diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx
index 4fc1f34..48f36b5 100644
--- a/pages/_app.page.tsx
+++ b/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';
diff --git a/scripts/wdyr.js b/scripts/wdyr.js
new file mode 100644
index 0000000..f4dbb68
--- /dev/null
+++ b/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,
+  });
+}
diff --git a/yarn.lock b/yarn.lock
index 0965d80..821ac53 100644
--- a/yarn.lock
+++ b/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==