Prevent fetching topics list if we already have them

src/autocomplete/TopicAutocomplete.js

@@ -9,6 +9,7 @@ import { connect } from '../react-redux';
 import { getTopicsForNarrow } from '../selectors';
 import { Popup, RawLabel, Touchable } from '../common';
 import AnimatedScaleComponent from '../animation/AnimatedScaleComponent';
+import { fetchTopicsForStream } from '../topics/topicActions';
 
 const styles = createStyleSheet({
   topic: {
@@ -31,6 +32,23 @@ type Props = $ReadOnly<{|
 |}>;
 
 class TopicAutocomplete extends PureComponent<Props> {
+  componentDidMount() {
+    const { dispatch, narrow } = this.props;
+    // The following should be sufficient to ensure we're up-to-date
+    // with the complete list of topics at all times that we need to
+    // be:
+    //
+    // - When we first expect to see the list, fetch all topics for
+    //   the stream.
+    //
+    // - Afterwards, update the list when a new message arrives, if it
+    //   introduces a new topic.
+    //
+    // The latter is already taken care of (see handling of
+    // EVENT_NEW_MESSAGE in topicsReducer). So, do the former here.
+    dispatch(fetchTopicsForStream(narrow));
+  }
+
   render() {
     const { isFocused, topics, text, onAutocomplete } = this.props;
 

src/compose/ComposeBox.js

@@ -22,13 +22,7 @@ import type {
 } from '../types';
 import { connect } from '../react-redux';
 import { withGetText } from '../boot/TranslationProvider';
-import {
-  addToOutbox,
-  draftUpdate,
-  fetchTopicsForStream,
-  sendTypingStart,
-  sendTypingStop,
-} from '../actions';
+import { addToOutbox, draftUpdate, sendTypingStart, sendTypingStop } from '../actions';
 import * as api from '../api';
 import { FloatingActionButton, Input } from '../common';
 import { showErrorAlert } from '../utils/info';
@@ -287,13 +281,11 @@ class ComposeBox extends PureComponent<Props, State> {
   };
 
   handleTopicFocus = () => {
-    const { dispatch, narrow } = this.props;
     this.setState({
       isTopicFocused: true,
       isFocused: true,
       isMenuExpanded: false,
     });
-    dispatch(fetchTopicsForStream(narrow));
   };
 
   handleTopicBlur = () => {

src/topics/topicActions.js

@@ -32,6 +32,7 @@ export const fetchTopicsForStream = (narrow: Narrow) => async (
   const streamName = streamNameOfNarrow(narrow);
 
   const streams = getStreams(state);
+  // TODO (#4333): Look for the stream by its ID, not its name.
   const stream = streams.find(sub => streamName === sub.name);
   if (!stream) {
     return;

src/topics/topicSelectors.js

@@ -29,6 +29,11 @@ export const getTopicsForNarrow: Selector<string[], Narrow> = createSelector(
     }
     const streamName = streamNameOfNarrow(narrow);
 
+    // TODO (#4333): Look for the stream by its ID, not its name. One
+    // expected consequence of the current code is that
+    // `TopicAutocomplete` would stop showing any topics, if someone
+    // changed the stream name while you were looking at
+    // `TopicAutocomplete`.
     const stream = streams.find(x => x.name === streamName);
     if (!stream || !topics[stream.stream_id]) {
       return NULL_ARRAY;