Investigate Component Re-rendering Issues

In React, re-rendering occurs due to changes in a component’s state or props, updates to a centralized state, or when a parent component re-renders, triggering re-renders in all child components. While re-rendering is essential for reflecting up-to-date information to users, excessive and unnecessary re-renders can significantly impact an app’s performance and user interface (UI) fluidity (the smoothness and responsiveness of the UI). To investigate re-rendering issues in your Vega apps, you can use why-did-you-render, a tool that helps identify unnecessary re-renders. This page provides steps to setup and use why-did-you-render when investigating re-rendering issues in your Vega apps.

Setup `why-did-you-render`

Step 1: Install `why-did-you-render` in your app project

npm install @welldone-software/why-did-you-render@8.0.3 --save-dev

By installing why-did-you-render, you’re adding a crucial debugging tool to your project that helps identify unnecessary re-renders in React components, allowing you to optimize your app’s performance. After you run the command, you should see the why-did-you-render package added to your package.json file under the devDependencies section. The package files are added to the node_modules folder in your project directory.

Step 2: Add `why-did-you-render` plugin in app’s `babel.config.js`

Add the following configuration to your app’s babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],

  env: {
    development: {
      plugins: [['@babel/plugin-transform-react-jsx', { runtime: 'classic' }]],
    },
  },
}

This configuration ensures compatibility with the why-did-you-render package.

Step 3: Create a `wdyr.tsx` file

/// <reference types="@welldone-software/why-did-you-render" />
import React from "react";

if (process.env.NODE_ENV === "development") {
  const whyDidYouRender = require("@welldone-software/why-did-you-render");
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

By creating a wdyr.tsx file, you’re setting up the central configuration for why-did-you-render, allowing you to initialize the library with specific settings and control its behavior across your entire app. The wdyr.tsx file is the entry file that configures why-did-you-render tracking behavior. The trackAllPureComponents config enables tracking Pure React Components only. To track additional components in your app code, set whyDidYouRender on the component to true. Example:

const MyCustomComponent = (props) => (
  <div>
    My Custom Component
  </div>
);

MyCustomComponent.whyDidYouRender = true;

export default MyCustomComponent;

To learn more about tracking components and other available options, read why-did-you-render documentation.

Step 4: Import `wdtr.tsx` in your app’s `index.js`

import './wdyr';
import { AppRegistry, LogBox } from 'react-native';
import  App  from './src/Home';
import { name as appName } from './app.json';

//other app code

AppRegistry.registerComponent(appName, () => App);

By importing wdtr.tsx in your app’s index.js file, you guarantee that why-did-you-render can properly set up its hooks to track component renders across your entire app.

Step 5: Run your app in `Debug` mode and inspect the `why-did-you-render` logs

Run your app in Debug mode. For instructions, see Set Up and Use Vega Studio.
Perform actions in your app, such as scrolling.
Inspect the why-did-you-render logs that appear in the app logs. To view app logs, see View logs.
Analyze the rendering reasons for components that are re-rendering.
Fix the underlying root causes to eliminate unnecessary re-renders.

Example of why-did-you-render log output

(NOBRIDGE) GROUP    SpatialNavigationVirtualizedList
(NOBRIDGE) LOG    {"SpatialNavigationVirtualizedList": [Function anonymous]} Re-rendered because of props changes:
(NOBRIDGE) GROUP      props.renderItem
(NOBRIDGE) LOG      different functions with the same name. (more info at http://bit.ly/wdyr02)
(NOBRIDGE) LOG      {"prev renderItem": [Function renderItem]} !== {"next renderItem": [Function renderItem]}
(NOBRIDGE) GROUP      Rendered by Grid
(NOBRIDGE) LOG      {"Grid": [Function Grid]} Re-rendered because of hook changes:
(NOBRIDGE) GROUP        [hook useState result]
(NOBRIDGE) LOG        different objects. (more info at http://bit.ly/wdyr3)
(NOBRIDGE) LOG        {"prev ": ""} !== {"next ": "Unnecessary State Update!"}
(NOBRIDGE) GROUP    SpatialNavigationVirtualizedList
(NOBRIDGE) LOG    {"SpatialNavigationVirtualizedList": [Function anonymous]} Re-rendered because of props changes:
(NOBRIDGE) GROUP      props.renderItem
(NOBRIDGE) LOG      different functions with the same name. (more info at http://bit.ly/wdyr02)
(NOBRIDGE) LOG      {"prev renderItem": [Function renderItem]} !== {"next renderItem": [Function renderItem]}
(NOBRIDGE) GROUP      Rendered by Grid
(NOBRIDGE) LOG      {"Grid": [Function Grid]} Re-rendered because of hook changes:
(NOBRIDGE) GROUP        [hook useState result]
(NOBRIDGE) LOG        different objects. (more info at http://bit.ly/wdyr3)
(NOBRIDGE) LOG        {"prev ": ""} !== {"next ": "Unnecessary State Update!"}
(NOBRIDGE) GROUP    SpatialNavigationVirtualizedList
(NOBRIDGE) LOG    {"SpatialNavigationVirtualizedList": [Function anonymous]} Re-rendered because of props changes:
(NOBRIDGE) GROUP      props.renderItem
(NOBRIDGE) LOG      different functions with the same name. (more info at http://bit.ly/wdyr02)
(NOBRIDGE) LOG      {"prev renderItem": [Function renderItem]} !== {"next renderItem": [Function renderItem]}
(NOBRIDGE) GROUP      Rendered by Grid
(NOBRIDGE) LOG      {"Grid": [Function Grid]} Re-rendered because of hook changes:
(NOBRIDGE) GROUP        [hook useState result]
(NOBRIDGE) LOG        different objects. (more info at http://bit.ly/wdyr3)
(NOBRIDGE) LOG        {"prev ": ""} !== {"next ": "Unnecessary State Update!"}

In the example logs, you see that the Grid component is re-rendering because of an update occurring within a useEffect hook. To resolve the re-render for Grid component, remove the unnecessary state update in the useEffect hook.

useEffect(() => {
  setHeaderTitle("Unnecessary State Update!");
}, []);

​Setup why-did-you-render

​Step 1: Install why-did-you-render in your app project

​Step 2: Add why-did-you-render plugin in app’s babel.config.js

​Step 3: Create a wdyr.tsx file

​Step 4: Import wdtr.tsx in your app’s index.js

​Step 5: Run your app in Debug mode and inspect the why-did-you-render logs

​Related topics