diff --git a/app/components/autocomplete/at_mention/at_mention.js b/app/components/autocomplete/at_mention/at_mention.js
index 18c1ff19e..1bc74fc01 100644
--- a/app/components/autocomplete/at_mention/at_mention.js
+++ b/app/components/autocomplete/at_mention/at_mention.js
@@ -54,51 +54,38 @@ export default class AtMention extends PureComponent {
             sections: [],
         };
     }
-
-    componentWillReceiveProps(nextProps) {
-        const {groups, inChannel, outChannel, teamMembers, isSearch, matchTerm, requestStatus} = nextProps;
-
-        // Not invoked, render nothing.
-        if (matchTerm === null) {
-            this.setState({
-                sections: [],
-            });
-            return;
-        }
-
-        if (matchTerm !== this.props.matchTerm) {
-            const sections = this.buildSections(nextProps);
-            this.setState({
-                sections,
-            });
-
-            this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
-
-            // Update user autocomplete list with results of server request
-            const {currentTeamId, currentChannelId} = this.props;
-            const channelId = isSearch ? '' : currentChannelId;
-            this.props.actions.autocompleteUsers(matchTerm, currentTeamId, channelId);
-            return;
-        }
-
-        // Server request is complete
-        if (
-            groups !== this.props.groups ||
-                (
-                    requestStatus !== RequestStatus.STARTED &&
-                    (inChannel !== this.props.inChannel || outChannel !== this.props.outChannel || teamMembers !== this.props.teamMembers)
-                )
-        ) {
-            const sections = this.buildSections(nextProps);
-            this.setState({
-                sections,
-            });
-
-            this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
-        }
+    updateSections(sections) {
+        this.setState({sections});
     }
-
     componentDidUpdate(prevProps, prevState) {
+        if (this.props.matchTerm !== prevProps.matchTerm) {
+            if (this.props.matchTerm === null) {
+                this.updateSections([]);
+            } else {
+                const sections = this.buildSections(this.props);
+                this.updateSections(sections);
+
+                this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
+
+                // Update user autocomplete list with results of server request
+                const {currentTeamId, currentChannelId} = this.props;
+                const channelId = this.props.isSearch ? '' : currentChannelId;
+                this.props.actions.autocompleteUsers(this.props.matchTerm, currentTeamId, channelId);
+            }
+        }
+        if (this.props.matchTerm !== null && this.props.matchTerm === prevProps.matchTerm) {
+            if (
+                this.props.groups !== prevProps.groups ||
+                    (
+                        this.props.requestStatus !== RequestStatus.STARTED &&
+                        (this.props.inChannel !== prevProps.inChannel || this.props.outChannel !== prevProps.outChannel || this.props.teamMembers !== prevProps.teamMembers)
+                    )
+            ) {
+                const sections = this.buildSections(this.props);
+                this.updateSections(sections);
+                this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
+            }
+        }
         if (prevState.sections.length !== this.state.sections.length && this.state.sections.length === 0) {
             this.props.onResultCountChange(0);
         }
diff --git a/app/components/autocomplete/channel_mention/channel_mention.js b/app/components/autocomplete/channel_mention/channel_mention.js
index 9feba18bc..1e5b5be51 100644
--- a/app/components/autocomplete/channel_mention/channel_mention.js
+++ b/app/components/autocomplete/channel_mention/channel_mention.js
@@ -61,15 +61,23 @@ export default class ChannelMention extends PureComponent {
         this.props.actions.autocompleteChannelsForSearch(currentTeamId, matchTerm);
     }, 200);
 
-    componentWillReceiveProps(nextProps) {
-        const {isSearch, matchTerm, myChannels, otherChannels, privateChannels, publicChannels, directAndGroupMessages, requestStatus, myMembers} = nextProps;
+    resetState() {
+        this.setState({
+            mentionComplete: false,
+            sections: [],
+        });
+    }
 
-        if ((matchTerm !== this.props.matchTerm && matchTerm === null) || this.state.mentionComplete) {
+    updateSections(sections) {
+        this.setState({sections});
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        const {isSearch, matchTerm, myChannels, otherChannels, privateChannels, publicChannels, directAndGroupMessages, requestStatus, myMembers} = this.props;
+
+        if ((matchTerm !== prevProps.matchTerm && matchTerm === null) || (this.state.mentionComplete !== prevState.mentionComplete && this.state.mentionComplete)) {
             // if the term changes but is null or the mention has been completed we render this component as null
-            this.setState({
-                mentionComplete: false,
-                sections: [],
-            });
+            this.resetState();
 
             this.props.onResultCountChange(0);
 
@@ -79,15 +87,15 @@ export default class ChannelMention extends PureComponent {
             return;
         }
 
-        if (matchTerm !== this.props.matchTerm) {
+        if (matchTerm !== prevProps.matchTerm) {
             const {currentTeamId} = this.props;
             this.runSearch(currentTeamId, matchTerm);
         }
 
-        if (matchTerm === '' || (myChannels !== this.props.myChannels || otherChannels !== this.props.otherChannels ||
-        privateChannels !== this.props.privateChannels || publicChannels !== this.props.publicChannels ||
-        directAndGroupMessages !== this.props.directAndGroupMessages ||
-        myMembers !== this.props.myMembers)) {
+        if ((matchTerm !== prevProps.matchTerm && matchTerm === '') || (myChannels !== prevProps.myChannels || otherChannels !== prevProps.otherChannels ||
+        privateChannels !== prevProps.privateChannels || publicChannels !== prevProps.publicChannels ||
+        directAndGroupMessages !== prevProps.directAndGroupMessages ||
+        myMembers !== prevProps.myMembers)) {
             const sections = [];
             if (isSearch) {
                 if (publicChannels.length) {
@@ -139,9 +147,7 @@ export default class ChannelMention extends PureComponent {
                 }
             }
 
-            this.setState({
-                sections,
-            });
+            this.updateSections(sections);
             this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
         }
     }
diff --git a/app/components/autocomplete/slash_suggestion/slash_suggestion.js b/app/components/autocomplete/slash_suggestion/slash_suggestion.js
index 2089d8f40..6d7cb785e 100644
--- a/app/components/autocomplete/slash_suggestion/slash_suggestion.js
+++ b/app/components/autocomplete/slash_suggestion/slash_suggestion.js
@@ -48,51 +48,53 @@ export default class SlashSuggestion extends PureComponent {
         lastCommandRequest: 0,
     };
 
-    componentWillReceiveProps(nextProps) {
-        if ((nextProps.value === this.props.value && nextProps.suggestions === this.props.suggestions && nextProps.commands === this.props.commands) ||
-            nextProps.isSearch || nextProps.value.startsWith('//') || !nextProps.channelId) {
+    setActive(active) {
+        this.setState({active});
+    }
+
+    setLastCommandRequest(lastCommandRequest) {
+        this.setState({lastCommandRequest});
+    }
+
+    componentDidUpdate(prevProps) {
+        if ((this.props.value === prevProps.value && this.props.suggestions === prevProps.suggestions && this.props.commands === prevProps.commands) ||
+            this.props.isSearch || this.props.value.startsWith('//') || !this.props.channelId) {
             return;
         }
 
-        const {currentTeamId} = this.props;
+        const {currentTeamId} = prevProps;
         const {
             commands: nextCommands,
             currentTeamId: nextTeamId,
             value: nextValue,
             suggestions: nextSuggestions,
-        } = nextProps;
+        } = this.props;
 
         if (nextValue[0] !== '/') {
-            this.setState({
-                active: false,
-            });
+            this.setActive(false);
             this.props.onResultCountChange(0);
             return;
         }
 
         if (nextValue.indexOf(' ') === -1) { // return suggestions for a top level cached commands
             if (currentTeamId !== nextTeamId) {
-                this.setState({
-                    lastCommandRequest: 0,
-                });
+                this.setLastCommandRequest(0);
             }
 
             const dataIsStale = Date.now() - this.state.lastCommandRequest > TIME_BEFORE_NEXT_COMMAND_REQUEST;
 
             if ((!nextCommands.length || dataIsStale)) {
-                this.props.actions.getAutocompleteCommands(nextProps.currentTeamId);
-                this.setState({
-                    lastCommandRequest: Date.now(),
-                });
+                this.props.actions.getAutocompleteCommands(this.props.currentTeamId);
+                this.setLastCommandRequest(Date.now());
             }
 
             const matches = this.filterSlashSuggestions(nextValue.substring(1), nextCommands);
             this.updateSuggestions(matches);
         } else if (isMinimumServerVersion(Client4.getServerVersion(), 5, 24)) {
-            if (nextSuggestions === this.props.suggestions) {
+            if (nextSuggestions === prevProps.suggestions) {
                 const args = {
-                    channel_id: this.props.channelId,
-                    ...(this.props.rootId && {root_id: this.props.rootId, parent_id: this.props.rootId}),
+                    channel_id: prevProps.channelId,
+                    ...(prevProps.rootId && {root_id: prevProps.rootId, parent_id: prevProps.rootId}),
                 };
                 this.props.actions.getCommandAutocompleteSuggestions(nextValue, nextTeamId, args);
             } else {
@@ -110,9 +112,7 @@ export default class SlashSuggestion extends PureComponent {
                 this.updateSuggestions(matches);
             }
         } else {
-            this.setState({
-                active: false,
-            });
+            this.setActive(false);
         }
     }