Fix performance issues (#370)

Author: fjmorant

package.json

@@ -22,7 +22,6 @@
   },
   "dependencies": {
     "object-hash": "2.2.0",
-    "react-fast-compare": "3.2.0",
     "shortid": "2.2.16",
     "use-global-hook": "0.3.0"
   },
@@ -33,8 +32,8 @@
   "devDependencies": {
     "@babel/core": "7.12.9",
     "@babel/runtime": "7.12.5",
-    "@commitlint/cli": "^16.1.0",
-    "@commitlint/config-conventional": "^16.0.0",
+    "@commitlint/cli": "16.1.0",
+    "@commitlint/config-conventional": "16.0.0",
     "@react-native-community/eslint-config": "3.0.1",
     "@testing-library/jest-native": "4.0.4",
     "@testing-library/react-native": "9.0.0",
@@ -49,7 +48,7 @@
     "codecov": "3.8.3",
     "eslint": "7.32.0",
     "eslint-plugin-prettier": "4.0.0",
-    "husky": "^7.0.4",
+    "husky": "7.0.4",
     "istanbul": "0.4.5",
     "istanbul-api": "3.0.0",
     "istanbul-reports": "3.1.3",

src/NestedListView.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Text, View } from 'react-native';
 import { INode } from './NodeView';
 import { render, waitFor, fireEvent } from '@testing-library/react-native';
@@ -307,18 +307,21 @@ describe('NestedListView', () => {
 
     const mockOnNodePressed = jest.fn();
 
-    const { UNSAFE_queryAllByType } = render(
+    const { queryByText } = render(
       <NestedListView
         onNodePressed={mockOnNodePressed}
         renderNode={(node: INode, level?: number) => (
-          <NestedRow level={level}>{node.name}</NestedRow>
+          <NestedRow level={level}>
+            <Text>{node.title}</Text>
+          </NestedRow>
         )}
         data={data}
       />,
     );
 
-    const component = UNSAFE_queryAllByType(NestedRow);
-    expect(component.length).toEqual(3);
+    expect(queryByText('child1')).toBeTruthy();
+    expect(queryByText('child2')).toBeTruthy();
+    expect(queryByText('child3')).toBeTruthy();
   });
 
   test('renders without renderNode', async () => {

src/NestedListView.tsx

@@ -1,6 +1,5 @@
 import hashObjectGenerator from 'object-hash';
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import isEqual from 'react-fast-compare';
 import { StyleSheet, Text, View } from 'react-native';
 import shortid from 'shortid';
 import { INode, NodeView } from './NodeView';
@@ -64,9 +63,7 @@ const NestedListView = React.memo(
           };
         }
 
-        const childrenName: string = getChildrenName
-          ? getChildrenName(node)
-          : 'items';
+        const childrenName = getChildrenName ? getChildrenName(node) : 'items';
         let children = node[childrenName];
 
         if (children) {
@@ -133,13 +130,16 @@ const NestedListView = React.memo(
       generateRootNode,
     ]);
 
-    const _getChildrenName = (node: INode) => {
-      if (node.name === 'root') {
-        return 'items';
-      }
+    const _getChildrenName = React.useCallback(
+      (node: INode) => {
+        if (node.name === 'root') {
+          return 'items';
+        }
 
-      return getChildrenName ? getChildrenName(node) : 'items';
-    };
+        return getChildrenName ? getChildrenName(node) : 'items';
+      },
+      [getChildrenName],
+    );
 
     const renderErrorMessage = (prop: string) => {
       return (
@@ -169,7 +169,8 @@ const NestedListView = React.memo(
       />
     );
   },
-  isEqual,
 );
 
+NestedListView.displayName = 'NestedListView';
+
 export { NestedListView };

src/NestedRow.test.tsx

@@ -1,37 +1,37 @@
-import * as React from 'react';
+import React from 'react';
 import { Text } from 'react-native';
 import { NestedRow } from './NestedRow';
 import { render, waitFor } from '@testing-library/react-native';
 
 describe('NestedListView', () => {
   test('renders with succesfully', async () => {
-    const { UNSAFE_getByType } = render(
+    const { getByText } = render(
       <NestedRow level={1} style={{ borderColor: 'black', borderWidth: 1 }}>
         <Text>Test</Text>
       </NestedRow>,
     );
 
     await waitFor(() => {
-      const component = UNSAFE_getByType(NestedRow);
-      expect(component).toBeDefined();
+      const component = getByText('Test');
+      expect(component).toBeTruthy();
     });
   });
 
   test('renders without level passed', async () => {
-    const { UNSAFE_getByType } = render(
+    const { getByText } = render(
       <NestedRow style={{ borderColor: 'black', borderWidth: 1 }}>
         <Text>Test</Text>
       </NestedRow>,
     );
 
     await waitFor(() => {
-      const component = UNSAFE_getByType(NestedRow);
-      expect(component).toBeDefined();
+      const component = getByText('Test');
+      expect(component).toBeTruthy();
     });
   });
 
   test('renders with height passed', async () => {
-    const { UNSAFE_getByType } = render(
+    const { getByText } = render(
       <NestedRow
         level={1}
         height={60}
@@ -42,8 +42,8 @@ describe('NestedListView', () => {
     );
 
     await waitFor(() => {
-      const component = UNSAFE_getByType(NestedRow);
-      expect(component).toBeDefined();
+      const component = getByText('Test');
+      expect(component).toBeTruthy();
     });
   });
 });

src/NestedRow.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import isEqual from 'react-fast-compare';
+import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 const styles = StyleSheet.create({
@@ -24,20 +23,22 @@ const NestedRow = React.memo(
     level = 0,
     paddingLeftIncrement = 10,
     style,
-  }: IProps) => (
-    <View
-      style={[
+  }: IProps) => {
+    const composedStyles = useMemo(
+      () => [
         styles.nestedRow,
         {
           ...style,
           paddingLeft: level * paddingLeftIncrement,
         },
         height ? { height } : {},
-      ]}>
-      {children}
-    </View>
-  ),
-  isEqual,
+      ],
+      [height, level, paddingLeftIncrement, style],
+    );
+    return <View style={composedStyles}>{children}</View>;
+  },
 );
 
+NestedRow.displayName = 'NestedRow';
+
 export { NestedRow };

src/NodeView.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import isEqual from 'react-fast-compare';
 import { FlatList, Pressable } from 'react-native';
 import globalHook, { Store } from 'use-global-hook';
 
@@ -147,7 +146,8 @@ const NodeView = React.memo(
       </>
     );
   },
-  isEqual,
 );
 
+NodeView.displayName = 'NodeView';
+
 export { NodeView };

yarn.lock

@@ -794,7 +794,7 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@commitlint/cli@^16.1.0":
+"@commitlint/cli@16.1.0":
   version "16.1.0"
   resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-16.1.0.tgz#022ad86008374b02974c9f3faf86affb785f4574"
   integrity sha512-x5L1knvA3isRWBRVQx+Q6D45pA9139a2aZQYpxkljMG0dj4UHZkCnsYWpnGalxPxASI7nrI0KedKfS2YeQ55cQ==
@@ -809,7 +809,7 @@
     resolve-global "1.0.0"
     yargs "^17.0.0"
 
-"@commitlint/config-conventional@^16.0.0":
+"@commitlint/config-conventional@16.0.0":
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-16.0.0.tgz#f42d9e1959416b5e691c8b5248fc2402adb1fc03"
   integrity sha512-mN7J8KlKFn0kROd+q9PB01sfDx/8K/R25yITspL1No8PB4oj9M1p77xWjP80hPydqZG9OvQq+anXK3ZWeR7s3g==
@@ -4121,7 +4121,7 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
-husky@^7.0.4:
+husky@7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
   integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==
@@ -6535,11 +6535,6 @@ react-devtools-core@4.19.1:
     shell-quote "^1.6.1"
     ws "^7"
 
-react-fast-compare@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
-  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
-
 "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"