explore perf issues using whyDidYouRender

following: welldone-software/why-did-you-render#266 (comment)

app/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/babel","next/core-web-vitals"]
 }

app/next.config.mjs

@@ -1,4 +1,10 @@
 import {withSentryConfig} from "@sentry/nextjs";
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+const injectWhyDidYouRender = require('./src/app/utils/why-did-you-render');
+
+
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   async redirects() {
@@ -14,6 +20,12 @@ const nextConfig = {
   experimental: {
     missingSuspenseWithCSRBailout: false,
   },
+  webpack: (config, {isServer}) => {
+    if (!isServer) {
+      injectWhyDidYouRender(config);
+    }
+    return config;
+  },
 };
 
 export default withSentryConfig(nextConfig, {

app/package.json

@@ -41,6 +41,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@welldone-software/why-did-you-render": "^8.0.3",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "jest": "^29.7.0",

app/src/app/components/Map.tsx

@@ -94,12 +94,17 @@ export const MapComponent: React.FC = () => {
   }, [searchParams, setMapDocument]);
 
   useEffect(() => {
+    // measure how long this function takes
+    console.time('set map metrics')
     setMapMetrics(mapMetrics);
+    // measure how long this function takes
+    console.timeEnd('set map metrics')
   }, [mapMetrics.data]);
 
   useEffect(() => {
     if (map.current || !mapContainer.current) return;
 
+    console.time('create map')
     map.current = new maplibregl.Map({
       container: mapContainer.current,
       style: MAP_OPTIONS.style,
@@ -111,7 +116,9 @@ export const MapComponent: React.FC = () => {
     map.current.scrollZoom.setZoomRate(1 / 300);
 
     map.current.addControl(new maplibregl.NavigationControl());
+    console.timeEnd('create map')
 
+    console.time('set map load event')
     map.current.on("load", () => {
       setMapLoaded(true);
       setMapRef(map);
@@ -147,7 +154,9 @@ export const MapComponent: React.FC = () => {
         });
       }
     });
-
+    console.timeEnd('set map load event')
+
+    console.time('set map actions')
     mapEvents.forEach((action) => {
       if (map.current) {
         map.current?.on(
@@ -159,6 +168,8 @@ export const MapComponent: React.FC = () => {
         );
       }
     });
+    console.timeEnd('set map actions')
+
 
     return () => {
       mapEvents.forEach((action) => {
@@ -182,9 +193,11 @@ export const MapComponent: React.FC = () => {
   }, [mapLoaded, zoneAssignments]);
 
   useEffect(() => {
+    console.time('reset map select state')
     if (mapLoaded && map.current) {
       handleResetMapSelectState(map);
     }
+    console.timeEnd('reset map select state')
   }, [mapLoaded, freshMap]);
 
   return <div className="h-full w-full-minus-sidebar" ref={mapContainer} />;

app/src/app/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import './utils/why-did-you-render';
 import { MapComponent } from "./components/Map";
 import SidebarComponent from "./components/sidebar/Sidebar";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

app/src/app/utils/why-did-you-render/index.js

@@ -0,0 +1,25 @@
+const path = require('path');
+
+/** @typedef {Parameters<import('next').NextConfig['webpack']>[1]} WebpackConfigContext */
+
+const injectionSource = path.join(__dirname, 'injection.ts');
+
+/**
+ * @param {import('webpack').Configuration} config
+ * @param {WebpackConfigContext} context
+ */
+module.exports = (config, context) => {
+	// check if in dev or production first. only run in dev!
+	if (process.env.NODE_ENV === 'development') {
+		const originalEntry = config.entry;
+
+		config.entry = async () => {
+			const entries = await originalEntry();
+
+			if (entries['main-app'] && !entries['main-app'].includes(injectionSource)) {
+				entries['main-app'].unshift(injectionSource);
+			}
+			return entries;
+		};
+	}
+};

app/src/app/utils/why-did-you-render/injection.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import whyDidYouRender from '@welldone-software/why-did-you-render';
+
+// eslint-disable-next-line no-console -- Show information that `whyDidYouRender` has been applied to the website.
+console.debug('Applying whyDidYouRender, to help you locate unnecessary re-renders during development. See https://github.com/welldone-software/why-did-you-render');
+
+// See https://github.com/welldone-software/why-did-you-render#options
+whyDidYouRender(React, {
+	trackAllPureComponents: true,
+	trackHooks: true,
+	logOwnerReasons: true,
+	collapseGroups: true,
+	include: [/./],
+
+	// This is for testing, remove it, if you don't want to log on different values
+	logOnDifferentValues: true
+});

app/tsconfig.json

@@ -35,7 +35,7 @@
     ".next/types/**/*.ts",
     "src/app/components/Picker.jsx",
     "src/app/page.jsx",
-    "src/app/api/apiHandlers.test.js", "src/app/components/sidebar/MapModeSelector.jsx", "src/app/components/sidebar/ColorPicker.jsx", ],
+    "src/app/api/apiHandlers.test.js", "src/app/components/sidebar/MapModeSelector.jsx", "src/app/components/sidebar/ColorPicker.jsx", "src/app/utils/why-did-you-render/index.js", ],
   "exclude": [
     "node_modules"
   ]