Why Did You Render - React & WordPress

When using React components in a WordPress project, I want to be able to diagnose what is causing components to re-render unnecessarily.

On a project recently, I ran into a problem where a React component was re-rendering unexpectedly. It was causing a quick layout shift and I was finding it really difficult to troubleshoot what was the cause. I came across the package why-did-you-render and the docs didn't have any tips on how to get it set up on a WordPress project. Below are the steps that my backend dev @davekellam and I took to get the package working with WordPress. We compile assets in our WordPress projects with Webpack and Babel.

We had to add a couple of dependencies and update the .babelrc file.

Dev dependencies to add to project:

@babel/preset-react
@welldone-software/why-did-you-render

.babelrc (add this line underneath @babel/preset-env):

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react", // added this line
    "@wordpress/default" 
  ]
}

Since we don't have access to an .env file, we had to add this next line in order to access the environment via the global mainScript. This will prevent the script from loading in production if we have forgotten to remove the dependency.
scripts.php:

'environment' => esc_attr( wp_get_environment_type() ),

In the top level .js file, in this case mine is called frontend.js, (need global mainscript, the code below will be placed above the individual component imports):

/* global mainScript */
import React from 'react'
import whyDidYouRender from '@welldone-software/why-did-you-render';

if (mainScript.environment === 'local') {
    whyDidYouRender(React, {
        trackAllPureComponents: true,
    });
}

in a component file, with ComponentName replaced with the actual name of the component:

ComponentName.whyDidYouRender = true

WDYR wants to only display a message if a component re-renders with the same props. If your component isn't getting re-rendered unnecessarily then you might not get an error message and it might seem like the package is not doing anything. Using this next code snippet instead will display any prop changes that happen. The result is a bit verbose but a simple test to make sure that the package is working.

ComponentName.whyDidYouRender = { logOnDifferentValues: true }

I am still encountering an issue of loading the package in the production environment. The package's docs have an example for how to conditionally import the package but I was unable to find a workaround in WordPress. The best course of action I can find is to either remove the dependency before the site is deployed or install the package when debugging and remove it before merging your branch.

More information about the use-cases for WDYR and an example on how to use it:
https://blog.logrocket.com/debugging-react-performance-issues-with-why-did-you-render/