From 5f2cbe53e53a8b24da1e529d89f2247d7e4f38a7 Mon Sep 17 00:00:00 2001
From: Evgeny Vasilyev <e.vasilyev@dodopizza.com>
Date: Thu, 4 Feb 2021 10:22:17 +0300
Subject: [PATCH 1/2] increase performance when rendering a large number of
 nodes

---
 src/js/CheckboxTree.js | 5 ++++-
 src/js/TreeNode.js     | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/js/CheckboxTree.js b/src/js/CheckboxTree.js
index dff16766..45661d1a 100644
--- a/src/js/CheckboxTree.js
+++ b/src/js/CheckboxTree.js
@@ -12,6 +12,7 @@ import iconsShape from './shapes/iconsShape';
 import languageShape from './shapes/languageShape';
 import listShape from './shapes/listShape';
 import nodeShape from './shapes/nodeShape';
+import { memoize } from 'lodash';
 
 class CheckboxTree extends React.Component {
     static propTypes = {
@@ -102,6 +103,8 @@ class CheckboxTree extends React.Component {
         this.onNodeClick = this.onNodeClick.bind(this);
         this.onExpandAll = this.onExpandAll.bind(this);
         this.onCollapseAll = this.onCollapseAll.bind(this);
+
+        this.combineMemorized = memoize((icons1, icons2) => ({...icons1, ...icons2})).bind(this)
     }
 
     // eslint-disable-next-line react/sort-comp
@@ -250,7 +253,7 @@ class CheckboxTree extends React.Component {
                     expandOnClick={expandOnClick}
                     expanded={flatNode.expanded}
                     icon={node.icon}
-                    icons={{ ...defaultIcons, ...icons }}
+                    icons={this.combineMemorized(defaultIcons, icons)}
                     label={node.label}
                     lang={lang}
                     optimisticToggle={optimisticToggle}
diff --git a/src/js/TreeNode.js b/src/js/TreeNode.js
index 71ba66d7..3b4f7307 100644
--- a/src/js/TreeNode.js
+++ b/src/js/TreeNode.js
@@ -7,7 +7,7 @@ import NativeCheckbox from './NativeCheckbox';
 import iconsShape from './shapes/iconsShape';
 import languageShape from './shapes/languageShape';
 
-class TreeNode extends React.Component {
+class TreeNode extends React.PureComponent {
     static propTypes = {
         checked: PropTypes.number.isRequired,
         disabled: PropTypes.bool.isRequired,

From 8833e59a5a0b66a39ba0c8132a122fa63a369c81 Mon Sep 17 00:00:00 2001
From: Evgeny Vasilyev <e.vasilyev@dodopizza.com>
Date: Thu, 4 Feb 2021 10:44:10 +0300
Subject: [PATCH 2/2] fix eslint complains

---
 src/js/CheckboxTree.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/CheckboxTree.js b/src/js/CheckboxTree.js
index 45661d1a..d0b3d542 100644
--- a/src/js/CheckboxTree.js
+++ b/src/js/CheckboxTree.js
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import isEqual from 'lodash/isEqual';
+import memoize from 'lodash/memoize';
 import { nanoid } from 'nanoid';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -12,7 +13,6 @@ import iconsShape from './shapes/iconsShape';
 import languageShape from './shapes/languageShape';
 import listShape from './shapes/listShape';
 import nodeShape from './shapes/nodeShape';
-import { memoize } from 'lodash';
 
 class CheckboxTree extends React.Component {
     static propTypes = {
@@ -104,7 +104,7 @@ class CheckboxTree extends React.Component {
         this.onExpandAll = this.onExpandAll.bind(this);
         this.onCollapseAll = this.onCollapseAll.bind(this);
 
-        this.combineMemorized = memoize((icons1, icons2) => ({...icons1, ...icons2})).bind(this)
+        this.combineMemorized = memoize((icons1, icons2) => ({ ...icons1, ...icons2 })).bind(this);
     }
 
     // eslint-disable-next-line react/sort-comp