Performance Issues when a user selects a value from a multiselect widget

[PalakJ05]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @react-awesome-query-builder/[email protected] for the project I'm working on.

User Case:
When a user selects a value from a multiselect widget, the entire component is re-rendered to check its width, which is unnecessary and can cause performance issues, especially when there are hundreds of options.

Solution:
To address this, a check has been implemented to compare the length of the title with a predefined maximum length. If the title length exceeds the maximum length, the component will update, assigning the new max length; otherwise, it will skip the re-render, improving performance

Here is the diff that solved my problem:

diff --git a/node_modules/@react-awesome-query-builder/antd/esm/widgets/value/MultiSelect.js b/node_modules/@react-awesome-query-builder/antd/esm/widgets/value/MultiSelect.js
index 09fbc98..ccf338d 100644
--- a/node_modules/@react-awesome-query-builder/antd/esm/widgets/value/MultiSelect.js
+++ b/node_modules/@react-awesome-query-builder/antd/esm/widgets/value/MultiSelect.js
@@ -12,6 +12,7 @@ import PropTypes from "prop-types";
 import { Select } from "antd";
 import { calcTextWidth, SELECT_WIDTH_OFFSET_RIGHT } from "../../utils/domUtils";
 import omit from "lodash/omit";
+import { isEqual } from "lodash";
 import { Utils } from "@react-awesome-query-builder/ui";
 var useOnPropsChanged = Utils.ReactUtils.useOnPropsChanged;
 var mapListValues = Utils.ListUtils.mapListValues;
@@ -38,25 +39,28 @@ var MultiSelectWidget = /*#__PURE__*/function (_Component) {
   _createClass(MultiSelectWidget, [{
     key: "onPropsChanged",
     value: function onPropsChanged(nextProps) {
-      var listValues = nextProps.listValues;
-      var optionsMaxWidth = 0;
-      mapListValues(listValues, function (_ref) {
-        var title = _ref.title,
-          value = _ref.value;
-        optionsMaxWidth = Math.max(optionsMaxWidth, calcTextWidth(title, null));
-      });
-      if (!isNaN(optionsMaxWidth) && optionsMaxWidth) {
-        this.optionsMaxWidth = optionsMaxWidth;
-      }
-      this.options = mapListValues(listValues, function (_ref2) {
-        var title = _ref2.title,
-          value = _ref2.value;
-        return /*#__PURE__*/React.createElement(Option, {
-          key: value,
-          value: value
-        }, title);
-      });
-    }
+           var listValues = nextProps.listValues;
+           var optionsMaxWidth = 0;
+             var maxLength = 0;
+             mapListValues(listValues, function (_ref) {
+               var title = _ref.title;
+               if(title.length > maxLength){
+                 maxLength = title.length;
+                 optionsMaxWidth = Math.max(optionsMaxWidth, calcTextWidth(title, null));
+               }
+             });
+           if (!isNaN(optionsMaxWidth) && optionsMaxWidth) {
+             this.optionsMaxWidth = optionsMaxWidth;
+           }
+           this.options = mapListValues(listValues, function (_ref2) {
+             var title = _ref2.title,
+               value = _ref2.value;
+             return /*#__PURE__*/React.createElement(Option, {
+               key: value,
+               value: value
+             }, title);
+           });
+         }
   }, {
     key: "render",
     value: function render() {

This issue body was partially generated by patch-package.

[ukrbublik]

Cool.
Could you create a PR please?