diff --git a/src/account-info/AccountDetails.js b/src/account-info/AccountDetails.js
index fcdfff8022e..cdb61a7ad4a 100644
--- a/src/account-info/AccountDetails.js
+++ b/src/account-info/AccountDetails.js
@@ -1,10 +1,11 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
-import type { User, UserOrBot, Dispatch } from '../types';
+import type { UserOrBot } from '../types';
 import styles, { createStyleSheet } from '../styles';
-import { connect } from '../react-redux';
+import { useSelector } from '../react-redux';
 import { UserAvatar, ComponentList, RawLabel } from '../common';
 import { getOwnUser, getUserStatusTextForUser } from '../selectors';
 import PresenceStatusIndicator from '../common/PresenceStatusIndicator';
@@ -29,68 +30,56 @@ const componentStyles = createStyleSheet({
   },
 });
 
-type SelectorProps = {|
-  ownUser: User,
-  userStatusText: string | void,
-|};
-
 type Props = $ReadOnly<{|
   user: UserOrBot,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-class AccountDetails extends PureComponent<Props> {
-  render() {
-    const { ownUser, user, userStatusText } = this.props;
+export default function AccountDetails(props: Props): Node {
+  const { user } = props;
 
-    const isSelf = user.user_id === ownUser.user_id;
+  const ownUser = useSelector(getOwnUser);
+  const userStatusText = useSelector(state => getUserStatusTextForUser(state, props.user.user_id));
 
-    let localTime: string | null = null;
-    // See comments at CrossRealmBot and User at src/api/modelTypes.js.
-    if (user.timezone !== '' && user.timezone !== undefined) {
-      try {
-        localTime = `${nowInTimeZone(user.timezone)} Local time`;
-      } catch (err) {
-        // The set of timezone names in the tz database is subject to change over
-        // time. Handle unrecognized timezones by quietly discarding them.
-      }
+  const isSelf = user.user_id === ownUser.user_id;
+
+  let localTime: string | null = null;
+  // See comments at CrossRealmBot and User at src/api/modelTypes.js.
+  if (user.timezone !== '' && user.timezone !== undefined) {
+    try {
+      localTime = `${nowInTimeZone(user.timezone)} Local time`;
+    } catch (err) {
+      // The set of timezone names in the tz database is subject to change over
+      // time. Handle unrecognized timezones by quietly discarding them.
     }
+  }
 
-    return (
-      <ComponentList outerSpacing itemStyle={componentStyles.componentListItem}>
+  return (
+    <ComponentList outerSpacing itemStyle={componentStyles.componentListItem}>
+      <View>
+        <UserAvatar avatarUrl={user.avatar_url} size={200} />
+      </View>
+      <View style={componentStyles.statusWrapper}>
+        <PresenceStatusIndicator
+          style={componentStyles.presenceStatusIndicator}
+          email={user.email}
+          hideIfOffline={false}
+          useOpaqueBackground={false}
+        />
+        <RawLabel style={[styles.largerText, styles.halfMarginRight]} text={user.full_name} />
+      </View>
+      {userStatusText !== undefined && (
+        <RawLabel style={[styles.largerText, componentStyles.statusText]} text={userStatusText} />
+      )}
+      {!isSelf && (
         <View>
-          <UserAvatar avatarUrl={user.avatar_url} size={200} />
+          <ActivityText style={styles.largerText} user={user} />
         </View>
-        <View style={componentStyles.statusWrapper}>
-          <PresenceStatusIndicator
-            style={componentStyles.presenceStatusIndicator}
-            email={user.email}
-            hideIfOffline={false}
-            useOpaqueBackground={false}
-          />
-          <RawLabel style={[styles.largerText, styles.halfMarginRight]} text={user.full_name} />
+      )}
+      {!isSelf && localTime !== null && (
+        <View>
+          <RawLabel style={styles.largerText} text={localTime} />
         </View>
-        {userStatusText !== undefined && (
-          <RawLabel style={[styles.largerText, componentStyles.statusText]} text={userStatusText} />
-        )}
-        {!isSelf && (
-          <View>
-            <ActivityText style={styles.largerText} user={user} />
-          </View>
-        )}
-        {!isSelf && localTime !== null && (
-          <View>
-            <RawLabel style={styles.largerText} text={localTime} />
-          </View>
-        )}
-      </ComponentList>
-    );
-  }
+      )}
+    </ComponentList>
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  ownUser: getOwnUser(state),
-  userStatusText: getUserStatusTextForUser(state, props.user.user_id),
-}))(AccountDetails);
diff --git a/src/account-info/AccountDetailsScreen.js b/src/account-info/AccountDetailsScreen.js
index 9ffdfa66743..9a02cf37f36 100644
--- a/src/account-info/AccountDetailsScreen.js
+++ b/src/account-info/AccountDetailsScreen.js
@@ -1,11 +1,12 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import type { Dispatch, UserOrBot, UserId } from '../types';
+import type { UserId } from '../types';
 import { createStyleSheet } from '../styles';
-import { connect } from '../react-redux';
+import { useSelector, useDispatch } from '../react-redux';
 import { Screen, ZulipButton, Label } from '../common';
 import { IconPrivateChat } from '../common/Icons';
 import { pm1to1NarrowFromUser } from '../utils/narrow';
@@ -25,53 +26,40 @@ const styles = createStyleSheet({
   },
 });
 
-type SelectorProps = $ReadOnly<{|
-  isActive: boolean,
-  user: UserOrBot,
-|}>;
-
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'account-details'>,
   route: RouteProp<'account-details', {| userId: UserId |}>,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-class AccountDetailsScreen extends PureComponent<Props> {
-  handleChatPress = () => {
-    const { user, dispatch } = this.props;
+export default function AccountDetailsScreen(props: Props): Node {
+  const dispatch = useDispatch();
+  const user = useSelector(state => getUserForId(state, props.route.params.userId));
+  const isActive = useSelector(state => getUserIsActive(state, props.route.params.userId));
+
+  const handleChatPress = useCallback(() => {
     dispatch(doNarrow(pm1to1NarrowFromUser(user)));
-  };
+  }, [user, dispatch]);
 
-  render() {
-    const { user, isActive } = this.props;
-    const title = {
-      text: '{_}',
-      values: {
-        // This causes the name not to get translated.
-        _: user.full_name || ' ',
-      },
-    };
+  const title = {
+    text: '{_}',
+    values: {
+      // This causes the name not to get translated.
+      _: user.full_name || ' ',
+    },
+  };
 
-    return (
-      <Screen title={title}>
-        <AccountDetails user={user} />
-        {!isActive && (
-          <Label style={styles.deactivatedText} text="(This user has been deactivated)" />
-        )}
-        <ZulipButton
-          style={styles.pmButton}
-          text={isActive ? 'Send private message' : 'View private messages'}
-          onPress={this.handleChatPress}
-          Icon={IconPrivateChat}
-        />
-      </Screen>
-    );
-  }
+  return (
+    <Screen title={title}>
+      <AccountDetails user={user} />
+      {!isActive && (
+        <Label style={styles.deactivatedText} text="(This user has been deactivated)" />
+      )}
+      <ZulipButton
+        style={styles.pmButton}
+        text={isActive ? 'Send private message' : 'View private messages'}
+        onPress={handleChatPress}
+        Icon={IconPrivateChat}
+      />
+    </Screen>
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  user: getUserForId(state, props.route.params.userId),
-  isActive: getUserIsActive(state, props.route.params.userId),
-}))(AccountDetailsScreen);
diff --git a/src/autocomplete/TopicAutocomplete.js b/src/autocomplete/TopicAutocomplete.js
index 4dd6bb55015..3371cb972c7 100644
--- a/src/autocomplete/TopicAutocomplete.js
+++ b/src/autocomplete/TopicAutocomplete.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
 import React, { useEffect } from 'react';
+import type { Node } from 'react';
 import { FlatList } from 'react-native';
 
 import type { Narrow } from '../types';
@@ -24,7 +25,7 @@ type Props = $ReadOnly<{|
   onAutocomplete: (name: string) => void,
 |}>;
 
-export default function TopicAutocomplete(props: Props) {
+export default function TopicAutocomplete(props: Props): Node {
   const { narrow, isFocused, text, onAutocomplete } = props;
   const dispatch = useDispatch();
   const topics = useSelector(state => getTopicsForNarrow(state, narrow));
diff --git a/src/chat/GroupDetailsScreen.js b/src/chat/GroupDetailsScreen.js
index 7f8e62baeec..b9c15e0c87b 100644
--- a/src/chat/GroupDetailsScreen.js
+++ b/src/chat/GroupDetailsScreen.js
@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useCallback } from 'react';
+import type { Node } from 'react';
 import { FlatList } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
@@ -15,7 +16,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'group-details', {| recipients: $ReadOnlyArray<UserId> |}>,
 |}>;
 
-export default function GroupDetailsScreen(props: Props) {
+export default function GroupDetailsScreen(props: Props): Node {
   const { recipients } = props.route.params;
   const handlePress = useCallback((user: UserOrBot) => {
     NavigationService.dispatch(navigateToAccountDetails(user.user_id));
diff --git a/src/chat/UnreadNotice.js b/src/chat/UnreadNotice.js
index 01d898692c4..d6fe5340151 100644
--- a/src/chat/UnreadNotice.js
+++ b/src/chat/UnreadNotice.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
 import React from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import type { Narrow } from '../types';
@@ -39,7 +40,7 @@ type Props = $ReadOnly<{|
   narrow: Narrow,
 |}>;
 
-export default function UnreadNotice(props: Props) {
+export default function UnreadNotice(props: Props): Node {
   const { narrow } = props;
   const unreadCount = useSelector(state => getUnreadCountForNarrow(state, narrow));
 
diff --git a/src/common/LoadingBanner.js b/src/common/LoadingBanner.js
index 59f1cdf5541..d40e5ee396e 100644
--- a/src/common/LoadingBanner.js
+++ b/src/common/LoadingBanner.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
 import React, { useContext } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import { useSelector } from '../react-redux';
@@ -30,7 +31,7 @@ type Props = $ReadOnly<{|
 /**
  * Display a notice that the app is connecting to the server, when appropriate.
  */
-export default function LoadingBanner(props: Props) {
+export default function LoadingBanner(props: Props): Node {
   const loading = useSelector(getLoading);
   const themeContext = useContext(ThemeContext);
 
diff --git a/src/common/ZulipStatusBar.js b/src/common/ZulipStatusBar.js
index ffd3322f95d..b740ea819e1 100644
--- a/src/common/ZulipStatusBar.js
+++ b/src/common/ZulipStatusBar.js
@@ -1,12 +1,13 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
+import type { Node } from 'react';
 import { Platform, StatusBar } from 'react-native';
 // $FlowFixMe[untyped-import]
 import Color from 'color';
 
-import type { Orientation, ThemeName, Dispatch } from '../types';
-import { connect } from '../react-redux';
+import type { ThemeName } from '../types';
+import { useSelector } from '../react-redux';
 import { foregroundColorFromBackground } from '../utils/color';
 import { getSession, getSettings } from '../selectors';
 
@@ -20,17 +21,9 @@ export const getStatusBarStyle = (statusBarColor: string): BarStyle =>
     ? 'light-content'
     : 'dark-content';
 
-type SelectorProps = $ReadOnly<{|
-  theme: ThemeName,
-  orientation: Orientation,
-|}>;
-
 type Props = $ReadOnly<{|
   backgroundColor?: string | void,
-  hidden: boolean,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
+  hidden?: boolean,
 |}>;
 
 /**
@@ -50,33 +43,24 @@ type Props = $ReadOnly<{|
  * top inset grows to accommodate a visible status bar, and shrinks to
  * give more room to the app's content when the status bar is hidden.
  */
-class ZulipStatusBar extends PureComponent<Props> {
-  static defaultProps = {
-    hidden: false,
-  };
-
-  render() {
-    const { theme, hidden, orientation } = this.props;
-    const backgroundColor = this.props.backgroundColor;
-    const statusBarColor = getStatusBarColor(backgroundColor, theme);
-    return (
-      orientation === 'PORTRAIT' && (
-        <StatusBar
-          animated
-          showHideTransition="slide"
-          hidden={hidden && Platform.OS !== 'android'}
-          backgroundColor={Color(statusBarColor)
-            .darken(0.1)
-            .hsl()
-            .string()}
-          barStyle={getStatusBarStyle(statusBarColor)}
-        />
-      )
-    );
-  }
+export default function ZulipStatusBar(props: Props): Node {
+  const { hidden = false } = props;
+  const theme = useSelector(state => getSettings(state).theme);
+  const orientation = useSelector(state => getSession(state).orientation);
+  const backgroundColor = props.backgroundColor;
+  const statusBarColor = getStatusBarColor(backgroundColor, theme);
+  return (
+    orientation === 'PORTRAIT' && (
+      <StatusBar
+        animated
+        showHideTransition="slide"
+        hidden={hidden && Platform.OS !== 'android'}
+        backgroundColor={Color(statusBarColor)
+          .darken(0.1)
+          .hsl()
+          .string()}
+        barStyle={getStatusBarStyle(statusBarColor)}
+      />
+    )
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  theme: getSettings(state).theme,
-  orientation: getSession(state).orientation,
-}))(ZulipStatusBar);
diff --git a/src/emoji/Emoji.js b/src/emoji/Emoji.js
index 6ac79009c1b..c35fd2ac948 100644
--- a/src/emoji/Emoji.js
+++ b/src/emoji/Emoji.js
@@ -1,11 +1,12 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
+import type { Node } from 'react';
 import { Image } from 'react-native';
 import { createIconSet } from 'react-native-vector-icons';
 
-import type { ImageEmojiType, Dispatch, EmojiType } from '../types';
+import type { EmojiType } from '../types';
 import { createStyleSheet } from '../styles';
-import { connect } from '../react-redux';
+import { useSelector } from '../react-redux';
 import { getAllImageEmojiByCode } from './emojiSelectors';
 import { codeToEmojiMap } from './data';
 
@@ -14,32 +15,22 @@ import { codeToEmojiMap } from './data';
   */
 const UnicodeEmoji = createIconSet(codeToEmojiMap);
 
-type SelectorProps = {|
-  imageEmoji: ImageEmojiType | void,
-|};
-
 type Props = $ReadOnly<{|
   type: EmojiType,
   code: string,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-class Emoji extends PureComponent<Props> {
-  styles = createStyleSheet({
-    image: { width: 20, height: 20 },
-  });
-
-  render() {
-    const { code, imageEmoji } = this.props;
-    if (imageEmoji) {
-      return <Image style={this.styles.image} source={{ uri: imageEmoji.source_url }} />;
-    }
-    return <UnicodeEmoji name={code} size={20} />;
+const componentStyles = createStyleSheet({
+  image: { width: 20, height: 20 },
+});
+
+export default function Emoji(props: Props): Node {
+  const { code } = props;
+  const imageEmoji = useSelector(state =>
+    props.type === 'image' ? getAllImageEmojiByCode(state)[props.code] : undefined,
+  );
+  if (imageEmoji) {
+    return <Image style={componentStyles.image} source={{ uri: imageEmoji.source_url }} />;
   }
+  return <UnicodeEmoji name={code} size={20} />;
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  imageEmoji: props.type === 'image' ? getAllImageEmojiByCode(state)[props.code] : undefined,
-}))(Emoji);
diff --git a/src/emoji/EmojiPickerScreen.js b/src/emoji/EmojiPickerScreen.js
index 8cbe7eb9059..62b844701dd 100644
--- a/src/emoji/EmojiPickerScreen.js
+++ b/src/emoji/EmojiPickerScreen.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React, { useState, useCallback } from 'react';
+import type { Node } from 'react';
 import { FlatList } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
@@ -11,8 +12,8 @@ import { unicodeCodeByName } from './codePointMap';
 import { Screen } from '../common';
 import EmojiRow from './EmojiRow';
 import { getFilteredEmojis } from './data';
-import type { RealmEmojiById, Auth, Dispatch, ReactionType } from '../types';
-import { connect } from '../react-redux';
+import type { ReactionType } from '../types';
+import { useSelector } from '../react-redux';
 import { getAuth, getActiveImageEmojiByName } from '../selectors';
 import { navigateBack } from '../nav/navActions';
 import zulipExtraEmojiMap from './zulipExtraEmojiMap';
@@ -22,81 +23,70 @@ import { showToast } from '../utils/info';
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'emoji-picker'>,
   route: RouteProp<'emoji-picker', {| messageId: number |}>,
-
-  activeImageEmojiByName: RealmEmojiById,
-  auth: Auth,
-  dispatch: Dispatch,
 |}>;
 
-type State = {|
-  filter: string,
-|};
-
-class EmojiPickerScreen extends PureComponent<Props, State> {
-  state = {
-    filter: '',
-  };
+export default function EmojiPickerScreen(props: Props): Node {
+  const { route } = props;
+  const { messageId } = route.params;
 
-  handleInputChange = (text: string) => {
-    this.setState({
-      filter: text.toLowerCase(),
-    });
-  };
+  const activeImageEmojiByName = useSelector(getActiveImageEmojiByName);
+  const auth = useSelector(getAuth);
 
-  getReactionTypeAndCode = (
-    emojiName: string,
-  ): {| reactionType: ReactionType, emojiCode: string |} => {
-    const { activeImageEmojiByName } = this.props;
-    const imageEmoji = activeImageEmojiByName[emojiName];
-    if (imageEmoji) {
-      return {
-        reactionType: zulipExtraEmojiMap[emojiName] ? 'zulip_extra_emoji' : 'realm_emoji',
-        emojiCode: imageEmoji.code,
-      };
-    }
-    return { reactionType: 'unicode_emoji', emojiCode: unicodeCodeByName[emojiName] };
-  };
+  const [filter, setFilter] = useState<string>('');
 
-  addReaction = (emojiName: string) => {
-    const { auth, route } = this.props;
-    const { messageId } = route.params;
+  const handleInputChange = useCallback((text: string) => {
+    setFilter(text.toLowerCase());
+  }, []);
 
-    const { reactionType, emojiCode } = this.getReactionTypeAndCode(emojiName);
-    api.emojiReactionAdd(auth, messageId, reactionType, emojiCode, emojiName).catch(err => {
-      logging.error('Error adding reaction emoji', err);
-      showToast(`${err}`);
-    });
-    NavigationService.dispatch(navigateBack());
-  };
+  const getReactionTypeAndCode = useCallback(
+    (
+      emojiName: string,
+    ): {|
+      reactionType: ReactionType,
+      emojiCode: string,
+    |} => {
+      const imageEmoji = activeImageEmojiByName[emojiName];
+      if (imageEmoji) {
+        return {
+          reactionType: zulipExtraEmojiMap[emojiName] ? 'zulip_extra_emoji' : 'realm_emoji',
+          emojiCode: imageEmoji.code,
+        };
+      }
+      return { reactionType: 'unicode_emoji', emojiCode: unicodeCodeByName[emojiName] };
+    },
+    [activeImageEmojiByName],
+  );
 
-  render() {
-    const { activeImageEmojiByName } = this.props;
-    const { filter } = this.state;
+  const addReaction = useCallback(
+    (emojiName: string) => {
+      const { reactionType, emojiCode } = getReactionTypeAndCode(emojiName);
+      api.emojiReactionAdd(auth, messageId, reactionType, emojiCode, emojiName).catch(err => {
+        logging.error('Error adding reaction emoji', err);
+        showToast(`${err}`);
+      });
+      NavigationService.dispatch(navigateBack());
+    },
+    [auth, messageId, getReactionTypeAndCode],
+  );
 
-    const emojiNames = getFilteredEmojis(filter, activeImageEmojiByName);
+  const emojiNames = getFilteredEmojis(filter, activeImageEmojiByName);
 
-    return (
-      <Screen search autoFocus scrollEnabled={false} searchBarOnChange={this.handleInputChange}>
-        <FlatList
-          keyboardShouldPersistTaps="always"
-          initialNumToRender={20}
-          data={emojiNames}
-          keyExtractor={item => item.name}
-          renderItem={({ item }) => (
-            <EmojiRow
-              type={item.emoji_type}
-              code={item.code}
-              name={item.name}
-              onPress={this.addReaction}
-            />
-          )}
-        />
-      </Screen>
-    );
-  }
+  return (
+    <Screen search autoFocus scrollEnabled={false} searchBarOnChange={handleInputChange}>
+      <FlatList
+        keyboardShouldPersistTaps="always"
+        initialNumToRender={20}
+        data={emojiNames}
+        keyExtractor={item => item.name}
+        renderItem={({ item }) => (
+          <EmojiRow
+            type={item.emoji_type}
+            code={item.code}
+            name={item.name}
+            onPress={addReaction}
+          />
+        )}
+      />
+    </Screen>
+  );
 }
-
-export default connect(state => ({
-  activeImageEmojiByName: getActiveImageEmojiByName(state),
-  auth: getAuth(state),
-}))(EmojiPickerScreen);
diff --git a/src/main/HomeScreen.js b/src/main/HomeScreen.js
index 62068ae4004..2fa70c59a0b 100644
--- a/src/main/HomeScreen.js
+++ b/src/main/HomeScreen.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
 import React from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
@@ -33,7 +34,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'home', void>,
 |}>;
 
-export default function HomeScreen(props: Props) {
+export default function HomeScreen(props: Props): Node {
   const dispatch = useDispatch();
 
   return (
diff --git a/src/message/MentionedUserNotSubscribed.js b/src/message/MentionedUserNotSubscribed.js
index 10216477638..7c0140d4ef9 100644
--- a/src/message/MentionedUserNotSubscribed.js
+++ b/src/message/MentionedUserNotSubscribed.js
@@ -1,26 +1,20 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 
-import type { Auth, Stream, Dispatch, UserOrBot, Subscription } from '../types';
+import type { Stream, UserOrBot, Subscription } from '../types';
 import { createStyleSheet } from '../styles';
-import { connect } from '../react-redux';
+import { useSelector } from '../react-redux';
 import * as api from '../api';
 import { ZulipButton, Label } from '../common';
 import { getAuth } from '../selectors';
 
-type SelectorProps = {|
-  auth: Auth,
-|};
-
 type Props = $ReadOnly<{|
   user: UserOrBot,
   stream: Subscription | {| ...Stream, in_home_view: boolean |},
   onDismiss: (user: UserOrBot) => void,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
 const styles = createStyleSheet({
@@ -56,43 +50,36 @@ const styles = createStyleSheet({
   },
 });
 
-class MentionedUserNotSubscribed extends PureComponent<Props> {
-  subscribeToStream = () => {
-    const { auth, stream, user } = this.props;
-    api.subscriptionAdd(auth, [{ name: stream.name }], [user.email]);
-    this.handleDismiss();
-  };
+export default function MentionedUserNotSubscribed(props: Props): Node {
+  const { user, stream, onDismiss } = props;
+  const auth = useSelector(getAuth);
 
-  handleDismiss = () => {
-    const { user, onDismiss } = this.props;
+  const handleDismiss = useCallback(() => {
     onDismiss(user);
-  };
+  }, [user, onDismiss]);
 
-  render() {
-    const { user } = this.props;
+  const subscribeToStream = useCallback(() => {
+    api.subscriptionAdd(auth, [{ name: stream.name }], [user.email]);
+    handleDismiss();
+  }, [auth, handleDismiss, stream, user]);
 
-    return (
-      <View>
-        <TouchableOpacity onPress={this.handleDismiss} style={styles.outer}>
-          <Label
-            text={{
-              text: '{username} will not be notified unless you subscribe them to this stream.',
-              values: { username: user.full_name },
-            }}
-            style={styles.text}
-          />
-          <ZulipButton
-            style={styles.button}
-            textStyle={styles.buttonText}
-            text="Subscribe"
-            onPress={this.subscribeToStream}
-          />
-        </TouchableOpacity>
-      </View>
-    );
-  }
+  return (
+    <View>
+      <TouchableOpacity onPress={handleDismiss} style={styles.outer}>
+        <Label
+          text={{
+            text: '{username} will not be notified unless you subscribe them to this stream.',
+            values: { username: user.full_name },
+          }}
+          style={styles.text}
+        />
+        <ZulipButton
+          style={styles.button}
+          textStyle={styles.buttonText}
+          text="Subscribe"
+          onPress={subscribeToStream}
+        />
+      </TouchableOpacity>
+    </View>
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  auth: getAuth(state),
-}))(MentionedUserNotSubscribed);
diff --git a/src/message/NotSubscribed.js b/src/message/NotSubscribed.js
index 86be2e7cd76..d88474ab215 100644
--- a/src/message/NotSubscribed.js
+++ b/src/message/NotSubscribed.js
@@ -1,52 +1,40 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
-import type { Auth, Stream, Dispatch, Narrow } from '../types';
-import { connect } from '../react-redux';
+import type { Stream, Narrow } from '../types';
+import { useSelector } from '../react-redux';
 import * as api from '../api';
 import { ZulipButton, Label } from '../common';
 import { getAuth, getStreamInNarrow } from '../selectors';
 import styles from '../styles';
 
-type SelectorProps = $ReadOnly<{|
-  auth: Auth,
-  stream: $ReadOnly<{ ...Stream, ... }>,
-|}>;
-
 type Props = $ReadOnly<{|
   narrow: Narrow,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-class NotSubscribed extends PureComponent<Props> {
-  subscribeToStream = () => {
-    const { auth, stream } = this.props;
-    api.subscriptionAdd(auth, [{ name: stream.name }]);
-  };
+export default function NotSubscribed(props: Props): Node {
+  const auth = useSelector(getAuth);
+  const stream: $ReadOnly<{ ...Stream, ... }> = useSelector(state =>
+    getStreamInNarrow(state, props.narrow),
+  );
 
-  render() {
-    const { stream } = this.props;
-
-    return (
-      <View style={styles.disabledComposeBox}>
-        <Label style={styles.disabledComposeText} text="You are not subscribed to this stream" />
-        {!stream.invite_only && (
-          <ZulipButton
-            style={styles.disabledComposeButton}
-            text="Subscribe"
-            onPress={this.subscribeToStream}
-          />
-        )}
-      </View>
-    );
-  }
+  const subscribeToStream = useCallback(() => {
+    api.subscriptionAdd(auth, [{ name: stream.name }]);
+  }, [auth, stream]);
+
+  return (
+    <View style={styles.disabledComposeBox}>
+      <Label style={styles.disabledComposeText} text="You are not subscribed to this stream" />
+      {!stream.invite_only && (
+        <ZulipButton
+          style={styles.disabledComposeButton}
+          text="Subscribe"
+          onPress={subscribeToStream}
+        />
+      )}
+    </View>
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  auth: getAuth(state),
-  stream: getStreamInNarrow(state, props.narrow),
-}))(NotSubscribed);
diff --git a/src/nav/ZulipNavigationContainer.js b/src/nav/ZulipNavigationContainer.js
index e5dbb1c25fd..14581b43caa 100644
--- a/src/nav/ZulipNavigationContainer.js
+++ b/src/nav/ZulipNavigationContainer.js
@@ -1,23 +1,15 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { useContext, useEffect } from 'react';
+import type { Node } from 'react';
 import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
 
-import { connect } from '../react-redux';
-import type { ThemeData } from '../styles';
+import { useSelector } from '../react-redux';
 import { ThemeContext } from '../styles';
 import * as NavigationService from './NavigationService';
-import type { Dispatch, ThemeName } from '../types';
 import { getSettings } from '../selectors';
 import AppNavigator from './AppNavigator';
 
-type SelectorProps = $ReadOnly<{|
-  theme: ThemeName,
-|}>;
-
-type Props = $ReadOnly<{|
-  dispatch: Dispatch,
-  ...SelectorProps,
-|}>;
+type Props = $ReadOnly<{||}>;
 
 /**
  * Wrapper for React Nav's component given by `createAppContainer`.
@@ -29,45 +21,44 @@ type Props = $ReadOnly<{|
  * - Call `createAppContainer` with the appropriate `initialRouteName`
  *   and `initialRouteParams` which we get from data in Redux.
  */
-class ZulipAppContainer extends PureComponent<Props> {
-  static contextType = ThemeContext;
-  context: ThemeData;
+export default function ZulipAppContainer(props: Props): Node {
+  const themeName = useSelector(state => getSettings(state).theme);
 
-  componentWillUnmount() {
-    NavigationService.isReadyRef.current = false;
-  }
+  useEffect(
+    () =>
+      // return a cleanup function:
+      //   https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1
+      () => {
+        NavigationService.isReadyRef.current = false;
+      },
+    [],
+  );
 
-  render() {
-    const { theme: themeName } = this.props;
+  const themeContext = useContext(ThemeContext);
 
-    const BaseTheme = themeName === 'night' ? DarkTheme : DefaultTheme;
+  const BaseTheme = themeName === 'night' ? DarkTheme : DefaultTheme;
 
-    const theme = {
-      ...BaseTheme,
-      dark: themeName === 'night',
-      colors: {
-        ...BaseTheme.colors,
-        primary: this.context.color,
-        background: this.context.backgroundColor,
-        card: this.context.cardColor,
-        border: this.context.dividerColor,
-      },
-    };
+  const theme = {
+    ...BaseTheme,
+    dark: themeName === 'night',
+    colors: {
+      ...BaseTheme.colors,
+      primary: themeContext.color,
+      background: themeContext.backgroundColor,
+      card: themeContext.cardColor,
+      border: themeContext.dividerColor,
+    },
+  };
 
-    return (
-      <NavigationContainer
-        ref={NavigationService.navigationContainerRef}
-        onReady={() => {
-          NavigationService.isReadyRef.current = true;
-        }}
-        theme={theme}
-      >
-        <AppNavigator />
-      </NavigationContainer>
-    );
-  }
+  return (
+    <NavigationContainer
+      ref={NavigationService.navigationContainerRef}
+      onReady={() => {
+        NavigationService.isReadyRef.current = true;
+      }}
+      theme={theme}
+    >
+      <AppNavigator />
+    </NavigationContainer>
+  );
 }
-
-export default connect(state => ({
-  theme: getSettings(state).theme,
-}))(ZulipAppContainer);
diff --git a/src/sharing/ChooseRecipientsScreen.js b/src/sharing/ChooseRecipientsScreen.js
index 4fda1e305e5..787b1961611 100644
--- a/src/sharing/ChooseRecipientsScreen.js
+++ b/src/sharing/ChooseRecipientsScreen.js
@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useState, useCallback } from 'react';
+import type { Node } from 'react';
 import type { UserId, UserOrBot } from '../types';
 import { Screen } from '../common';
 import UserPickerCard from '../user-picker/UserPickerCard';
@@ -8,7 +9,7 @@ type Props = $ReadOnly<{|
   onComplete: ($ReadOnlyArray<UserId>) => void,
 |}>;
 
-export default function ChooseRecipientsScreen(props: Props) {
+export default function ChooseRecipientsScreen(props: Props): Node {
   const { onComplete } = props;
   const [filter, setFilter] = useState<string>('');
 
diff --git a/src/start/IosCompliantAppleAuthButton/index.js b/src/start/IosCompliantAppleAuthButton/index.js
index 3af4dc21f39..00d8708867e 100644
--- a/src/start/IosCompliantAppleAuthButton/index.js
+++ b/src/start/IosCompliantAppleAuthButton/index.js
@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useState, useEffect } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 import type { ViewStyle } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import * as AppleAuthentication from 'expo-apple-authentication';
@@ -32,7 +33,7 @@ type Props = $ReadOnly<{|
  * Apple", but without marking it with a different style from the
  * other buttons.
  */
-export default function IosCompliantAppleAuthButton(props: Props) {
+export default function IosCompliantAppleAuthButton(props: Props): Node {
   const { style, onPress } = props;
   const theme = useSelector(state => getSettings(state).theme);
   const [isNativeButtonAvailable, setIsNativeButtonAvailable] = useState<boolean | void>(undefined);
diff --git a/src/streams/CreateStreamScreen.js b/src/streams/CreateStreamScreen.js
index 247fbbbf5f3..3e3ceb2af07 100644
--- a/src/streams/CreateStreamScreen.js
+++ b/src/streams/CreateStreamScreen.js
@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useCallback } from 'react';
+import type { Node } from 'react';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
@@ -15,7 +16,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'create-stream', void>,
 |}>;
 
-export default function CreateStreamScreen(props: Props) {
+export default function CreateStreamScreen(props: Props): Node {
   const dispatch = useDispatch();
   const ownEmail = useSelector(getOwnEmail);
 
diff --git a/src/streams/EditStreamScreen.js b/src/streams/EditStreamScreen.js
index 34d4d08594a..06ab4acceb8 100644
--- a/src/streams/EditStreamScreen.js
+++ b/src/streams/EditStreamScreen.js
@@ -1,55 +1,44 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import * as NavigationService from '../nav/NavigationService';
-import type { Dispatch, Stream } from '../types';
-import { connect } from '../react-redux';
+import { useSelector, useDispatch } from '../react-redux';
 import { updateExistingStream, navigateBack } from '../actions';
 import { getStreamForId } from '../selectors';
 import { Screen } from '../common';
 import EditStreamCard from './EditStreamCard';
 
-type SelectorProps = $ReadOnly<{|
-  stream: Stream,
-|}>;
-
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'edit-stream'>,
   route: RouteProp<'edit-stream', {| streamId: number |}>,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-class EditStreamScreen extends PureComponent<Props> {
-  handleComplete = (name: string, description: string, isPrivate: boolean) => {
-    const { dispatch, stream } = this.props;
-
-    dispatch(updateExistingStream(stream.stream_id, stream, { name, description, isPrivate }));
-    NavigationService.dispatch(navigateBack());
-  };
-
-  render() {
-    const { stream } = this.props;
-
-    return (
-      <Screen title="Edit stream" padding>
-        <EditStreamCard
-          isNewStream={false}
-          initialValues={{
-            name: stream.name,
-            description: stream.description,
-            invite_only: stream.invite_only,
-          }}
-          onComplete={this.handleComplete}
-        />
-      </Screen>
-    );
-  }
+export default function EditStreamScreen(props: Props): Node {
+  const dispatch = useDispatch();
+  const stream = useSelector(state => getStreamForId(state, props.route.params.streamId));
+
+  const handleComplete = useCallback(
+    (name: string, description: string, isPrivate: boolean) => {
+      dispatch(updateExistingStream(stream.stream_id, stream, { name, description, isPrivate }));
+      NavigationService.dispatch(navigateBack());
+    },
+    [stream, dispatch],
+  );
+
+  return (
+    <Screen title="Edit stream" padding>
+      <EditStreamCard
+        isNewStream={false}
+        initialValues={{
+          name: stream.name,
+          description: stream.description,
+          invite_only: stream.invite_only,
+        }}
+        onComplete={handleComplete}
+      />
+    </Screen>
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  stream: getStreamForId(state, props.route.params.streamId),
-}))(EditStreamScreen);
diff --git a/src/streams/InviteUsersScreen.js b/src/streams/InviteUsersScreen.js
index 1c70a8b8434..8ac2d48f7c2 100644
--- a/src/streams/InviteUsersScreen.js
+++ b/src/streams/InviteUsersScreen.js
@@ -1,60 +1,41 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { useState, useCallback } from 'react';
+import type { Node } from 'react';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import * as NavigationService from '../nav/NavigationService';
-import type { Auth, Dispatch, Stream, UserOrBot } from '../types';
-import { connect } from '../react-redux';
+import type { UserOrBot } from '../types';
+import { useSelector } from '../react-redux';
 import { Screen } from '../common';
 import { navigateBack } from '../actions';
 import * as api from '../api';
 import { getAuth, getStreamForId } from '../selectors';
 import UserPickerCard from '../user-picker/UserPickerCard';
 
-type SelectorProps = $ReadOnly<{|
-  auth: Auth,
-  stream: Stream,
-|}>;
-
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'invite-users'>,
   route: RouteProp<'invite-users', {| streamId: number |}>,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-type State = {|
-  filter: string,
-|};
-
-class InviteUsersScreen extends PureComponent<Props, State> {
-  state = {
-    filter: '',
-  };
-
-  handleFilterChange = (filter: string) => this.setState({ filter });
-
-  handleInviteUsers = (selected: UserOrBot[]) => {
-    const { auth, stream } = this.props;
-
-    const recipients = selected.map(user => user.email);
-    api.subscriptionAdd(auth, [{ name: stream.name }], recipients);
-    NavigationService.dispatch(navigateBack());
-  };
-
-  render() {
-    const { filter } = this.state;
-    return (
-      <Screen search scrollEnabled={false} searchBarOnChange={this.handleFilterChange}>
-        <UserPickerCard filter={filter} onComplete={this.handleInviteUsers} />
-      </Screen>
-    );
-  }
+export default function InviteUsersScreen(props: Props): Node {
+  const auth = useSelector(getAuth);
+  const stream = useSelector(state => getStreamForId(state, props.route.params.streamId));
+
+  const [filter, setFilter] = useState<string>('');
+
+  const handleInviteUsers = useCallback(
+    (selected: UserOrBot[]) => {
+      const recipients = selected.map(user => user.email);
+      api.subscriptionAdd(auth, [{ name: stream.name }], recipients);
+      NavigationService.dispatch(navigateBack());
+    },
+    [auth, stream],
+  );
+
+  return (
+    <Screen search scrollEnabled={false} searchBarOnChange={setFilter}>
+      <UserPickerCard filter={filter} onComplete={handleInviteUsers} />
+    </Screen>
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  auth: getAuth(state),
-  stream: getStreamForId(state, props.route.params.streamId),
-}))(InviteUsersScreen);
diff --git a/src/streams/StreamSettingsScreen.js b/src/streams/StreamSettingsScreen.js
index 90679f5b1be..e0d4c0eae3f 100644
--- a/src/streams/StreamSettingsScreen.js
+++ b/src/streams/StreamSettingsScreen.js
@@ -1,12 +1,12 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import * as NavigationService from '../nav/NavigationService';
-import type { Auth, Dispatch, Stream, Subscription } from '../types';
-import { connect } from '../react-redux';
+import { useDispatch, useSelector } from '../react-redux';
 import { delay } from '../utils/async';
 import { SwitchRow, Screen, ZulipButton } from '../common';
 import { getSettings } from '../directSelectors';
@@ -22,129 +22,115 @@ import styles from '../styles';
 import { getSubscriptionsById } from '../subscriptions/subscriptionSelectors';
 import * as api from '../api';
 
-type SelectorProps = $ReadOnly<{|
-  auth: Auth,
-  isAdmin: boolean,
-  stream: Stream,
-  subscription?: Subscription,
-  userSettingStreamNotification: boolean,
-|}>;
-
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'stream-settings'>,
   route: RouteProp<'stream-settings', {| streamId: number |}>,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-class StreamSettingsScreen extends PureComponent<Props> {
-  handleTogglePinStream = (newValue: boolean) => {
-    const { dispatch, stream } = this.props;
-    dispatch(setSubscriptionProperty(stream.stream_id, 'pin_to_top', newValue));
-  };
+export default function StreamSettingsScreen(props: Props): Node {
+  const dispatch = useDispatch();
+
+  const auth = useSelector(getAuth);
+  const isAdmin = useSelector(getIsAdmin);
+  const stream = useSelector(state => getStreamForId(state, props.route.params.streamId));
+  const subscription = useSelector(state =>
+    getSubscriptionsById(state).get(props.route.params.streamId),
+  );
+  const userSettingStreamNotification = useSelector(state => getSettings(state).streamNotification);
+
+  const handleTogglePinStream = useCallback(
+    (newValue: boolean) => {
+      dispatch(setSubscriptionProperty(stream.stream_id, 'pin_to_top', newValue));
+    },
+    [dispatch, stream],
+  );
 
-  handleToggleMuteStream = (newValue: boolean) => {
-    const { dispatch, stream } = this.props;
-    dispatch(setSubscriptionProperty(stream.stream_id, 'is_muted', newValue));
-  };
+  const handleToggleMuteStream = useCallback(
+    (newValue: boolean) => {
+      dispatch(setSubscriptionProperty(stream.stream_id, 'is_muted', newValue));
+    },
+    [dispatch, stream],
+  );
 
-  handlePressEdit = () => {
-    const { stream } = this.props;
+  const handlePressEdit = useCallback(() => {
     NavigationService.dispatch(navigateToEditStream(stream.stream_id));
-  };
+  }, [stream]);
 
-  handlePressEditSubscribers = () => {
-    const { stream } = this.props;
+  const handlePressEditSubscribers = useCallback(() => {
     NavigationService.dispatch(navigateToStreamSubscribers(stream.stream_id));
-  };
+  }, [stream]);
 
-  handlePressSubscribe = () => {
-    const { auth, stream } = this.props;
+  const handlePressSubscribe = useCallback(() => {
     api.subscriptionAdd(auth, [{ name: stream.name }]);
-  };
+  }, [auth, stream]);
 
-  handlePressUnsubscribe = () => {
-    const { auth, stream } = this.props;
+  const handlePressUnsubscribe = useCallback(() => {
     api.subscriptionRemove(auth, [stream.name]);
-  };
+  }, [auth, stream]);
 
-  handleToggleStreamPushNotification = () => {
-    const { dispatch, subscription, stream, userSettingStreamNotification } = this.props;
+  const handleToggleStreamPushNotification = useCallback(() => {
     const currentValue = subscription?.push_notifications ?? userSettingStreamNotification;
     dispatch(setSubscriptionProperty(stream.stream_id, 'push_notifications', !currentValue));
-  };
+  }, [dispatch, stream, subscription, userSettingStreamNotification]);
 
-  render() {
-    const { isAdmin, stream, subscription, userSettingStreamNotification } = this.props;
-
-    return (
-      <Screen title="Stream">
-        <StreamCard stream={stream} subscription={subscription} />
-        {subscription && (
-          <>
-            <SwitchRow
-              Icon={IconPin}
-              label="Pinned"
-              value={subscription.pin_to_top}
-              onValueChange={this.handleTogglePinStream}
-            />
-            <SwitchRow
-              Icon={IconMute}
-              label="Muted"
-              value={subscription.in_home_view === false}
-              onValueChange={this.handleToggleMuteStream}
-            />
-            <SwitchRow
-              Icon={IconNotifications}
-              label="Notifications"
-              value={subscription.push_notifications ?? userSettingStreamNotification}
-              onValueChange={this.handleToggleStreamPushNotification}
-            />
-          </>
+  return (
+    <Screen title="Stream">
+      <StreamCard stream={stream} subscription={subscription} />
+      {subscription && (
+        <>
+          <SwitchRow
+            Icon={IconPin}
+            label="Pinned"
+            value={subscription.pin_to_top}
+            onValueChange={handleTogglePinStream}
+          />
+          <SwitchRow
+            Icon={IconMute}
+            label="Muted"
+            value={subscription.in_home_view === false}
+            onValueChange={handleToggleMuteStream}
+          />
+          <SwitchRow
+            Icon={IconNotifications}
+            label="Notifications"
+            value={subscription.push_notifications ?? userSettingStreamNotification}
+            onValueChange={handleToggleStreamPushNotification}
+          />
+        </>
+      )}
+      <View style={styles.padding}>
+        {isAdmin && (
+          <ZulipButton
+            style={styles.marginTop}
+            Icon={IconEdit}
+            text="Edit"
+            secondary
+            onPress={() => delay(handlePressEdit)}
+          />
         )}
-        <View style={styles.padding}>
-          {isAdmin && (
-            <ZulipButton
-              style={styles.marginTop}
-              Icon={IconEdit}
-              text="Edit"
-              secondary
-              onPress={() => delay(this.handlePressEdit)}
-            />
-          )}
+        <ZulipButton
+          style={styles.marginTop}
+          Icon={IconPlusSquare}
+          text="Add subscribers"
+          secondary
+          onPress={() => delay(handlePressEditSubscribers)}
+        />
+        {subscription ? (
           <ZulipButton
             style={styles.marginTop}
-            Icon={IconPlusSquare}
-            text="Add subscribers"
+            text="Unsubscribe"
             secondary
-            onPress={() => delay(this.handlePressEditSubscribers)}
+            onPress={() => delay(handlePressUnsubscribe)}
           />
-          {subscription ? (
-            <ZulipButton
-              style={styles.marginTop}
-              text="Unsubscribe"
-              secondary
-              onPress={() => delay(this.handlePressUnsubscribe)}
-            />
-          ) : (
-            <ZulipButton
-              style={styles.marginTop}
-              text="Subscribe"
-              secondary
-              onPress={() => delay(this.handlePressSubscribe)}
-            />
-          )}
-        </View>
-      </Screen>
-    );
-  }
+        ) : (
+          <ZulipButton
+            style={styles.marginTop}
+            text="Subscribe"
+            secondary
+            onPress={() => delay(handlePressSubscribe)}
+          />
+        )}
+      </View>
+    </Screen>
+  );
 }
-
-export default connect((state, props) => ({
-  auth: getAuth(state),
-  isAdmin: getIsAdmin(state),
-  stream: getStreamForId(state, props.route.params.streamId),
-  subscription: getSubscriptionsById(state).get(props.route.params.streamId),
-  userSettingStreamNotification: getSettings(state).streamNotification,
-}))(StreamSettingsScreen);
diff --git a/src/streams/SubscriptionsCard.js b/src/streams/SubscriptionsCard.js
index 23daf1b50b8..049e9253c95 100644
--- a/src/streams/SubscriptionsCard.js
+++ b/src/streams/SubscriptionsCard.js
@@ -1,13 +1,13 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
 import type { StreamTabsNavigationProp } from '../main/StreamTabsScreen';
-import type { Dispatch, Subscription } from '../types';
 import { createStyleSheet } from '../styles';
-import { connect } from '../react-redux';
+import { useDispatch, useSelector } from '../react-redux';
 import StreamList from './StreamList';
 import { LoadingBanner } from '../common';
 import { streamNarrow } from '../utils/narrow';
@@ -22,41 +22,27 @@ const styles = createStyleSheet({
   },
 });
 
-type SelectorProps = $ReadOnly<{|
-  subscriptions: Subscription[],
-  unreadByStream: $ReadOnly<{| [number]: number |}>,
-|}>;
-
 type Props = $ReadOnly<{|
   navigation: StreamTabsNavigationProp<'subscribed'>,
   route: RouteProp<'subscribed', void>,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-class SubscriptionsCard extends PureComponent<Props> {
-  handleNarrow = (streamName: string) => {
-    this.props.dispatch(doNarrow(streamNarrow(streamName)));
-  };
-
-  render() {
-    const { subscriptions, unreadByStream } = this.props;
-
-    return (
-      <View style={styles.container}>
-        <LoadingBanner />
-        <StreamList
-          streams={subscriptions}
-          unreadByStream={unreadByStream}
-          onPress={this.handleNarrow}
-        />
-      </View>
-    );
-  }
+export default function SubscriptionsCard(props: Props): Node {
+  const dispatch = useDispatch();
+  const subscriptions = useSelector(getSubscribedStreams);
+  const unreadByStream = useSelector(getUnreadByStream);
+
+  const handleNarrow = useCallback(
+    (streamName: string) => {
+      dispatch(doNarrow(streamNarrow(streamName)));
+    },
+    [dispatch],
+  );
+
+  return (
+    <View style={styles.container}>
+      <LoadingBanner />
+      <StreamList streams={subscriptions} unreadByStream={unreadByStream} onPress={handleNarrow} />
+    </View>
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  subscriptions: getSubscribedStreams(state),
-  unreadByStream: getUnreadByStream(state),
-}))(SubscriptionsCard);
diff --git a/src/subscriptions/StreamListCard.js b/src/subscriptions/StreamListCard.js
index 2df1da0106a..a2cd140dc0d 100644
--- a/src/subscriptions/StreamListCard.js
+++ b/src/subscriptions/StreamListCard.js
@@ -1,14 +1,14 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
 import type { StreamTabsNavigationProp } from '../main/StreamTabsScreen';
 import * as NavigationService from '../nav/NavigationService';
-import type { Auth, Dispatch, Stream, Subscription } from '../types';
 import { createStyleSheet } from '../styles';
-import { connect } from '../react-redux';
+import { useDispatch, useSelector } from '../react-redux';
 import { ZulipButton, LoadingBanner } from '../common';
 import * as api from '../api';
 import { delay } from '../utils/async';
@@ -29,67 +29,60 @@ const styles = createStyleSheet({
 type Props = $ReadOnly<{|
   navigation: StreamTabsNavigationProp<'allStreams'>,
   route: RouteProp<'allStreams', void>,
-
-  dispatch: Dispatch,
-  auth: Auth,
-  canCreateStreams: boolean,
-  streams: $ReadOnlyArray<Stream>,
-  subscriptions: $ReadOnlyArray<Subscription>,
 |}>;
 
-class StreamListCard extends PureComponent<Props> {
-  handleSwitchChange = (streamName: string, switchValue: boolean) => {
-    const { auth } = this.props;
+export default function StreamListCard(props: Props): Node {
+  const dispatch = useDispatch();
+  const auth = useSelector(getAuth);
+  const canCreateStreams = useSelector(getCanCreateStreams);
+  const streams = useSelector(getStreams);
+  const subscriptions = useSelector(getSubscriptions);
 
-    if (switchValue) {
-      api.subscriptionAdd(auth, [{ name: streamName }]);
-    } else {
-      api.subscriptionRemove(auth, [streamName]);
-    }
-  };
+  const subsAndStreams = streams.map(x => ({
+    ...x,
+    subscribed: subscriptions.some(s => s.stream_id === x.stream_id),
+  }));
 
-  handleNarrow = (streamName: string) => {
-    const { dispatch } = this.props;
-    dispatch(doNarrow(streamNarrow(streamName)));
-  };
+  const handleSwitchChange = useCallback(
+    (streamName: string, switchValue: boolean) => {
+      if (switchValue) {
+        api.subscriptionAdd(auth, [{ name: streamName }]);
+      } else {
+        api.subscriptionRemove(auth, [streamName]);
+      }
+    },
+    [auth],
+  );
 
-  render() {
-    const { canCreateStreams, streams, subscriptions } = this.props;
-    const subsAndStreams = streams.map(x => ({
-      ...x,
-      subscribed: subscriptions.some(s => s.stream_id === x.stream_id),
-    }));
+  const handleNarrow = useCallback(
+    (streamName: string) => {
+      dispatch(doNarrow(streamNarrow(streamName)));
+    },
+    [dispatch],
+  );
 
-    return (
-      <View style={styles.wrapper}>
-        <LoadingBanner />
-        {canCreateStreams && (
-          <ZulipButton
-            style={styles.button}
-            secondary
-            text="Create new stream"
-            onPress={() =>
-              delay(() => {
-                NavigationService.dispatch(navigateToCreateStream());
-              })
-            }
-          />
-        )}
-        <StreamList
-          streams={subsAndStreams}
-          showSwitch
-          showDescriptions
-          onSwitch={this.handleSwitchChange}
-          onPress={this.handleNarrow}
+  return (
+    <View style={styles.wrapper}>
+      <LoadingBanner />
+      {canCreateStreams && (
+        <ZulipButton
+          style={styles.button}
+          secondary
+          text="Create new stream"
+          onPress={() =>
+            delay(() => {
+              NavigationService.dispatch(navigateToCreateStream());
+            })
+          }
         />
-      </View>
-    );
-  }
+      )}
+      <StreamList
+        streams={subsAndStreams}
+        showSwitch
+        showDescriptions
+        onSwitch={handleSwitchChange}
+        onPress={handleNarrow}
+      />
+    </View>
+  );
 }
-
-export default connect(state => ({
-  auth: getAuth(state),
-  canCreateStreams: getCanCreateStreams(state),
-  streams: getStreams(state),
-  subscriptions: getSubscriptions(state),
-}))(StreamListCard);
diff --git a/src/title-buttons/ExtraNavButtonTopic.js b/src/title-buttons/ExtraNavButtonTopic.js
index f1d784e72f2..c00c078d7c0 100644
--- a/src/title-buttons/ExtraNavButtonTopic.js
+++ b/src/title-buttons/ExtraNavButtonTopic.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
 import React, { useCallback } from 'react';
+import type { Node } from 'react';
 
 import type { Narrow } from '../types';
 import { useSelector, useDispatch } from '../react-redux';
@@ -14,7 +15,7 @@ type Props = $ReadOnly<{|
   color: string,
 |}>;
 
-export default function ExtraNavButtonTopic(props: Props) {
+export default function ExtraNavButtonTopic(props: Props): Node {
   const { narrow, color } = props;
   const dispatch = useDispatch();
   const streams = useSelector(getStreams);
diff --git a/src/title/ActivityText.js b/src/title/ActivityText.js
index 596baa6f39c..0b9c844b10d 100644
--- a/src/title/ActivityText.js
+++ b/src/title/ActivityText.js
@@ -1,42 +1,30 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
+import type { Node } from 'react';
 import type { TextStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
-import type { UserPresence, UserStatus, Dispatch, UserOrBot } from '../types';
-import { connect } from '../react-redux';
+import type { UserOrBot } from '../types';
+import { useSelector } from '../react-redux';
 import { getPresence, getUserStatus } from '../selectors';
 import { presenceToHumanTime } from '../utils/presence';
 import { RawLabel } from '../common';
 
-type SelectorProps = $ReadOnly<{|
-  presence: UserPresence,
-  userStatus: UserStatus,
-|}>;
-
 type Props = $ReadOnly<{|
   style: TextStyleProp,
   user: UserOrBot,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-class ActivityText extends PureComponent<Props> {
-  render() {
-    const { style, presence, userStatus } = this.props;
+export default function ActivityText(props: Props): Node {
+  const { style } = props;
+  const presence = useSelector(state => getPresence(state)[props.user.email]);
+  const userStatus = useSelector(state => getUserStatus(state)[props.user.user_id]);
 
-    if (!presence) {
-      return null;
-    }
+  if (!presence) {
+    return null;
+  }
 
-    const activity = presenceToHumanTime(presence, userStatus);
+  const activity = presenceToHumanTime(presence, userStatus);
 
-    return <RawLabel style={style} text={`Active ${activity}`} />;
-  }
+  return <RawLabel style={style} text={`Active ${activity}`} />;
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  presence: getPresence(state)[props.user.email],
-  userStatus: getUserStatus(state)[props.user.user_id],
-}))(ActivityText);
diff --git a/src/title/TitleStream.js b/src/title/TitleStream.js
index 326c44f11e7..627d64550de 100644
--- a/src/title/TitleStream.js
+++ b/src/title/TitleStream.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
 import React, { useContext } from 'react';
+import type { Node } from 'react';
 import { Text, View, TouchableWithoutFeedback } from 'react-native';
 // $FlowFixMe[untyped-import]
 import { useActionSheet } from '@expo/react-native-action-sheet';
@@ -43,7 +44,7 @@ const componentStyles = createStyleSheet({
   },
 });
 
-export default function TitleStream(props: Props) {
+export default function TitleStream(props: Props): Node {
   const { narrow, color } = props;
   const dispatch = useDispatch();
   const stream = useSelector(state => getStreamInNarrow(state, narrow));
diff --git a/src/topics/TopicListScreen.js b/src/topics/TopicListScreen.js
index ff3ea1e2884..49a99e28a9a 100644
--- a/src/topics/TopicListScreen.js
+++ b/src/topics/TopicListScreen.js
@@ -1,11 +1,11 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
+import type { Node } from 'react';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import type { Dispatch, Stream, TopicExtended } from '../types';
-import { connect } from '../react-redux';
+import { useSelector, useDispatch } from '../react-redux';
 import { Screen } from '../common';
 import { topicNarrow } from '../utils/narrow';
 import { getTopicsForStream } from '../selectors';
@@ -13,61 +13,35 @@ import { getStreamForId } from '../subscriptions/subscriptionSelectors';
 import TopicList from './TopicList';
 import { fetchTopics, doNarrow } from '../actions';
 
-type SelectorProps = $ReadOnly<{|
-  stream: Stream,
-  topics: ?(TopicExtended[]),
-|}>;
-
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'topic-list'>,
   route: RouteProp<'topic-list', {| streamId: number |}>,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-type State = {|
-  filter: string,
-|};
+export default function TopicListScreen(props: Props): Node {
+  const dispatch = useDispatch();
+  const stream = useSelector(state => getStreamForId(state, props.route.params.streamId));
+  const topics = useSelector(state => getTopicsForStream(state, props.route.params.streamId));
 
-class TopicListScreen extends PureComponent<Props, State> {
-  state = {
-    filter: '',
-  };
+  const [filter, setFilter] = useState<string>('');
 
-  componentDidMount() {
-    const { dispatch, stream } = this.props;
-    dispatch(fetchTopics(stream.stream_id));
-  }
+  const handlePress = useCallback(
+    (streamObj: string, topic: string) => {
+      dispatch(doNarrow(topicNarrow(stream.name, topic)));
+    },
+    [dispatch, stream],
+  );
 
-  handlePress = (streamObj: string, topic: string) => {
-    const { dispatch, stream } = this.props;
-    dispatch(doNarrow(topicNarrow(stream.name, topic)));
-  };
-
-  handleFilterChange = (filter: string) => this.setState({ filter });
+  useEffect(() => {
+    dispatch(fetchTopics(stream.stream_id));
+  }, [stream, dispatch]);
 
-  render() {
-    const { stream, topics } = this.props;
-    const { filter } = this.state;
-    const filteredTopics =
-      topics && topics.filter(topic => topic.name.toLowerCase().includes(filter.toLowerCase()));
+  const filteredTopics =
+    topics && topics.filter(topic => topic.name.toLowerCase().includes(filter.toLowerCase()));
 
-    return (
-      <Screen
-        title="Topics"
-        centerContent
-        search
-        searchBarOnChange={this.handleFilterChange}
-        scrollEnabled={false}
-      >
-        <TopicList stream={stream} topics={filteredTopics} onPress={this.handlePress} />
-      </Screen>
-    );
-  }
+  return (
+    <Screen title="Topics" centerContent search searchBarOnChange={setFilter} scrollEnabled={false}>
+      <TopicList stream={stream} topics={filteredTopics} onPress={handlePress} />
+    </Screen>
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  stream: getStreamForId(state, props.route.params.streamId),
-  topics: getTopicsForStream(state, props.route.params.streamId),
-}))(TopicListScreen);
diff --git a/src/user-groups/CreateGroupScreen.js b/src/user-groups/CreateGroupScreen.js
index 54f2811a9b7..9b5e7971485 100644
--- a/src/user-groups/CreateGroupScreen.js
+++ b/src/user-groups/CreateGroupScreen.js
@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useState, useCallback } from 'react';
+import type { Node } from 'react';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
@@ -18,7 +19,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'create-group', void>,
 |}>;
 
-export default function CreateGroupScreen(props: Props) {
+export default function CreateGroupScreen(props: Props): Node {
   const dispatch = useDispatch();
   const ownUserId = useSelector(getOwnUserId);
 
diff --git a/src/user-picker/UserPickerCard.js b/src/user-picker/UserPickerCard.js
index 76a7c0d881c..3a77a1cf1ab 100644
--- a/src/user-picker/UserPickerCard.js
+++ b/src/user-picker/UserPickerCard.js
@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useState, useRef, useEffect } from 'react';
+import type { Node } from 'react';
 import { View, FlatList } from 'react-native';
 import { createSelector } from 'reselect';
 
@@ -39,7 +40,7 @@ const getUsersToShow: Selector<User[]> = createSelector(
   (users, ownUserId) => users.filter(user => user.user_id !== ownUserId),
 );
 
-export default function UserPickerCard(props: Props) {
+export default function UserPickerCard(props: Props): Node {
   const { filter } = props;
 
   const users = useSelector(getUsersToShow);
diff --git a/src/user-status/UserStatusScreen.js b/src/user-status/UserStatusScreen.js
index d29652dc64d..0af77962799 100644
--- a/src/user-status/UserStatusScreen.js
+++ b/src/user-status/UserStatusScreen.js
@@ -1,5 +1,6 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { useState, useContext, useCallback } from 'react';
+import type { Node } from 'react';
 import { FlatList, View } from 'react-native';
 import { TranslationContext } from '../boot/TranslationProvider';
 import { createStyleSheet } from '../styles';
@@ -7,8 +8,7 @@ import { createStyleSheet } from '../styles';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import * as NavigationService from '../nav/NavigationService';
-import type { GetText, Dispatch } from '../types';
-import { connect } from '../react-redux';
+import { useSelector, useDispatch } from '../react-redux';
 import { Input, SelectableOptionRow, Screen, ZulipButton } from '../common';
 import { getSelfUserStatusText } from '../selectors';
 import { IconCancel, IconDone } from '../common/Icons';
@@ -32,95 +32,73 @@ const styles = createStyleSheet({
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'user-status'>,
   route: RouteProp<'user-status', void>,
-
-  dispatch: Dispatch,
-  userStatusText: string,
 |}>;
 
-type State = {|
-  statusText: string,
-|};
-
-class UserStatusScreen extends PureComponent<Props, State> {
-  static contextType = TranslationContext;
-  context: GetText;
-
-  state = {
-    statusText: this.props.userStatusText,
-  };
-
-  setStatusTextState = (statusText: string) => {
-    this.setState({
-      statusText,
-    });
-  };
+export default function UserStatusScreen(props: Props): Node {
+  const dispatch = useDispatch();
+  const userStatusText = useSelector(getSelfUserStatusText);
 
-  updateStatusText = (statusText: string) => {
-    const { dispatch } = this.props;
-    dispatch(updateUserStatusText(statusText));
-    NavigationService.dispatch(navigateBack());
-  };
+  const [statusText, setStatusText] = useState<string>(userStatusText);
+  const _ = useContext(TranslationContext);
 
-  handleStatusTextUpdate = () => {
-    const { statusText } = this.state;
-    this.updateStatusText(statusText);
-  };
+  const sendToServer = useCallback(
+    (_statusText: string) => {
+      dispatch(updateUserStatusText(_statusText));
+      NavigationService.dispatch(navigateBack());
+    },
+    [dispatch],
+  );
 
-  handleStatusTextClear = () => {
-    this.setStatusTextState('');
-    this.updateStatusText('');
-  };
+  const handlePressUpdate = useCallback(() => {
+    sendToServer(statusText);
+  }, [statusText, sendToServer]);
 
-  render() {
-    const { statusText } = this.state;
-    const _ = this.context;
+  const handlePressClear = useCallback(() => {
+    setStatusText('');
+    sendToServer('');
+  }, [sendToServer]);
 
-    return (
-      <Screen title="User status">
-        <Input
-          autoFocus
-          maxLength={60}
-          style={styles.statusTextInput}
-          placeholder="What’s your status?"
-          value={statusText}
-          onChangeText={this.setStatusTextState}
+  return (
+    <Screen title="User status">
+      <Input
+        autoFocus
+        maxLength={60}
+        style={styles.statusTextInput}
+        placeholder="What’s your status?"
+        value={statusText}
+        onChangeText={setStatusText}
+      />
+      <FlatList
+        data={statusSuggestions}
+        keyboardShouldPersistTaps="always"
+        keyExtractor={item => item}
+        renderItem={({ item, index }) => (
+          <SelectableOptionRow
+            key={item}
+            itemKey={item}
+            title={item}
+            selected={item === statusText}
+            onRequestSelectionChange={itemKey => {
+              setStatusText(_(itemKey));
+            }}
+          />
+        )}
+      />
+      <View style={styles.buttonsWrapper}>
+        <ZulipButton
+          style={styles.button}
+          secondary
+          text="Clear"
+          onPress={handlePressClear}
+          Icon={IconCancel}
         />
-        <FlatList
-          data={statusSuggestions}
-          keyboardShouldPersistTaps="always"
-          keyExtractor={item => item}
-          renderItem={({ item, index }) => (
-            <SelectableOptionRow
-              key={item}
-              itemKey={item}
-              title={item}
-              selected={item === statusText}
-              onRequestSelectionChange={itemKey => {
-                this.setStatusTextState(_(itemKey));
-              }}
-            />
-          )}
+        <ZulipButton
+          style={styles.button}
+          text="Update"
+          onPress={handlePressUpdate}
+          Icon={IconDone}
         />
-        <View style={styles.buttonsWrapper}>
-          <ZulipButton
-            style={styles.button}
-            secondary
-            text="Clear"
-            onPress={this.handleStatusTextClear}
-            Icon={IconCancel}
-          />
-          <ZulipButton
-            style={styles.button}
-            text="Update"
-            onPress={this.handleStatusTextUpdate}
-            Icon={IconDone}
-          />
-        </View>
-      </Screen>
-    );
-  }
+      </View>
+    </Screen>
+  );
 }
-
-export default connect(state => ({
-  userStatusText: getSelfUserStatusText(state),
-}))(UserStatusScreen);
diff --git a/src/users/UsersCard.js b/src/users/UsersCard.js
index 154e7bcf181..59ab17bb73d 100644
--- a/src/users/UsersCard.js
+++ b/src/users/UsersCard.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
 import React, { useCallback } from 'react';
+import type { Node } from 'react';
 
 import * as NavigationService from '../nav/NavigationService';
 import type { UserOrBot } from '../types';
@@ -14,7 +15,7 @@ type Props = $ReadOnly<{|
   filter: string,
 |}>;
 
-export default function UsersCard(props: Props) {
+export default function UsersCard(props: Props): Node {
   const { filter } = props;
   const dispatch = useDispatch();
   const users = useSelector(getUsers);
diff --git a/src/users/userHelpers.js b/src/users/userHelpers.js
index 20a0893af5a..b9e94640250 100644
--- a/src/users/userHelpers.js
+++ b/src/users/userHelpers.js
@@ -123,7 +123,9 @@ export const getUniqueUsers = (
   users: $ReadOnlyArray<AutocompleteOption>,
 ): $ReadOnlyArray<AutocompleteOption> => uniqby(users, 'email');
 
-export const getUsersAndWildcards = (users: $ReadOnlyArray<AutocompleteOption>) => [
+export const getUsersAndWildcards = (
+  users: $ReadOnlyArray<AutocompleteOption>,
+): $ReadOnlyArray<AutocompleteOption> => [
   // TODO stop using makeUserId on these fake "user IDs"; have some
   //   more-explicit UI logic instead of these pseudo-users.
   { user_id: makeUserId(-1), full_name: 'all', email: '(Notify everyone)' },