コンポーネントの再レンダリングに関する問題の調査

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

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

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

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

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

MyCustomComponent.whyDidYouRender = true;

export default MyCustomComponent;

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

//その他のアプリコード

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

(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!"}

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