pull out SuggestionListContainer component from render method, put in separate class method to prevent re-renders of the same component

Author: Tom Hutman

src/components/AutoCompleteTextarea/Textarea.js

@@ -619,62 +619,61 @@ class ReactTextareaAutocomplete extends React.Component {
     scrollToItem(this.dropdownRef, item);
   };
 
-  render() {
+  renderSuggestionListContainer() {
     const {
-      className,
-      containerClassName,
-      containerStyle,
       disableMentions,
       dropdownClassName,
       dropdownStyle,
       itemClassName,
       itemStyle,
       listClassName,
-      style,
       SuggestionList = DefaultSuggestionList,
     } = this.props;
-
-    let { maxRows } = this.props;
-
     const { component, currentTrigger, dataLoading, value } = this.state;
 
     const selectedItem = this._getItemOnSelect();
     const suggestionData = this._getSuggestions();
     const textToReplace = this._getTextToReplace();
 
-    const SuggestionListContainer = () => {
-      if (
-        (dataLoading || suggestionData) &&
-        currentTrigger &&
-        !(disableMentions && currentTrigger === '@')
-      ) {
-        return (
-          <div
-            className={`rta__autocomplete ${dropdownClassName || ''}`}
-            ref={(ref) => {
-              this.dropdownRef = ref;
-            }}
-            style={dropdownStyle}
-          >
-            {component && suggestionData && textToReplace && (
-              <SuggestionList
-                className={listClassName}
-                component={component}
-                dropdownScroll={this._dropdownScroll}
-                getSelectedItem={selectedItem}
-                getTextToReplace={textToReplace}
-                itemClassName={itemClassName}
-                itemStyle={itemStyle}
-                onSelect={this._onSelect}
-                value={value}
-                values={suggestionData}
-              />
-            )}
-          </div>
-        );
-      }
-      return null;
-    };
+    if (
+      (dataLoading || suggestionData) &&
+      currentTrigger &&
+      !(disableMentions && currentTrigger === '@')
+    ) {
+      return (
+        <div
+          className={`rta__autocomplete ${dropdownClassName || ''}`}
+          ref={(ref) => {
+            this.dropdownRef = ref;
+          }}
+          style={dropdownStyle}
+        >
+          {component && suggestionData && textToReplace && (
+            <SuggestionList
+              className={listClassName}
+              component={component}
+              dropdownScroll={this._dropdownScroll}
+              getSelectedItem={selectedItem}
+              getTextToReplace={textToReplace}
+              itemClassName={itemClassName}
+              itemStyle={itemStyle}
+              onSelect={this._onSelect}
+              value={value}
+              values={suggestionData}
+            />
+          )}
+        </div>
+      );
+    }
+    return null;
+  }
+
+  render() {
+    const { className, containerClassName, containerStyle, style } = this.props;
+
+    let { maxRows } = this.props;
+
+    const { dataLoading, value } = this.state;
 
     if (!this.props.grow) maxRows = 1;
 
@@ -685,7 +684,7 @@ class ReactTextareaAutocomplete extends React.Component {
         }`}
         style={containerStyle}
       >
-        <SuggestionListContainer />
+        {this.renderSuggestionListContainer()}
         <Textarea
           {...this._cleanUpProps()}
           className={`rta__textarea ${className || ''}`}