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

Copy code Copied to clipboard.

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:

Copy code Copied to clipboard.

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

Copy code Copied to clipboard.

/// <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:

Copy code Copied to clipboard.

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

Copy code Copied to clipboard.

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

1. Run your app in Debug mode. For instructions, see Set Up and Use Vega Studio.
2. Perform actions in your app, such as scrolling.
3. Inspect the why-did-you-render logs that appear in the app logs. To view app logs, see View logs.
4. Analyze the rendering reasons for components that are re-rendering.
5. 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.

Copy code Copied to clipboard.

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

Related topics

• 💬 Community: Using React DevTools to profile component rendering
• 💬 Community: How to solve common performance issues for Vega apps

Last updated: Sep 30, 2025