DEV Community

Cover image for Why Did You Render - React & WordPress
Riley McMaster for Plank

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

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

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() ),
Enter fullscreen mode Exit fullscreen mode

Snippet of code used to access env variable

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,
    });
}
Enter fullscreen mode Exit fullscreen mode

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

ComponentName.whyDidYouRender = true
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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/

Top comments (0)