Integration with Next.js 13 app folder? about why-did-you-render

[jens-duttke]

This works for me:

1. Create a file scripts/why-did-you-render/index.js:

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) => {
	if (context.dev && !context.isServer) {
		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;
		};
	}
};

Here, instead of entries['main.js'] (which is used for the pages folder), entries['main-app'] is used (which is required for the app folder).

2. Create a file scripts/why-did-you-render/injection.ts (you could also call it injection.js if you don't use TypeScript, and change it in the code above).

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
});

In your next.config.js add:

const injectWhyDidYouRender = require('./scripts/why-did-you-render');

/** @type {import('next').NextConfig} */
module.exports = {
	...
	webpack: (config, context) => {
		injectWhyDidYouRender(config, context)

		return config;
	}
};

The include: [/./] in the whyDidYouRender options is a workaround for a bug, which seems to be in

why-did-you-render/src/shouldTrack.js

Lines 39 to 47 in 0f364e8

	return !!(
	Component.whyDidYouRender || (
	wdyrStore.options.trackAllPureComponents && (
	(Component && Component.prototype instanceof wdyrStore.React.PureComponent) ||
	isMemoComponent(Component)
	)
	) ||
	shouldInclude(displayName)
	);