diff --git a/app/soapbox/features/aliases/components/search.js b/app/soapbox/features/aliases/components/search.js
deleted file mode 100644
index 4311685e7..000000000
--- a/app/soapbox/features/aliases/components/search.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import Icon from 'soapbox/components/icon';
-import { Button } from 'soapbox/components/ui';
-
-import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from '../../../actions/aliases';
-
-const messages = defineMessages({
-  search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
-  searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
-});
-
-const mapStateToProps = state => ({
-  value: state.getIn(['aliases', 'suggestions', 'value']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onSubmit: value => dispatch(fetchAliasesSuggestions(value)),
-  onClear: () => dispatch(clearAliasesSuggestions()),
-  onChange: value => dispatch(changeAliasesSuggestions(value)),
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class Search extends React.PureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onClear: PropTypes.func.isRequired,
-  };
-
-  handleChange = e => {
-    this.props.onChange(e.target.value);
-  }
-
-  handleKeyUp = e => {
-    if (e.keyCode === 13) {
-      this.props.onSubmit(this.props.value);
-    }
-  }
-
-  handleSubmit = () => {
-    this.props.onSubmit(this.props.value);
-  }
-
-  handleClear = () => {
-    this.props.onClear();
-  }
-
-  render() {
-    const { value, intl } = this.props;
-    const hasValue = value.length > 0;
-
-    return (
-      <div className='aliases_search search'>
-        <label>
-          <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
-
-          <input
-            className='search__input'
-            type='text'
-            value={value}
-            onChange={this.handleChange}
-            onKeyUp={this.handleKeyUp}
-            placeholder={intl.formatMessage(messages.search)}
-          />
-        </label>
-
-        <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
-          <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
-        </div>
-        <Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
new file mode 100644
index 000000000..516a38884
--- /dev/null
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases';
+import Icon from 'soapbox/components/icon';
+import { Button } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
+  searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
+});
+
+const Search: React.FC = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const value = useAppSelector(state => state.aliases.getIn(['suggestions', 'value'])) as string;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(changeAliasesSuggestions(e.target.value));
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.keyCode === 13) {
+      dispatch(fetchAliasesSuggestions(value));
+    }
+  };
+
+  const handleSubmit = () => {
+    dispatch(fetchAliasesSuggestions(value));
+  };
+
+  const handleClear = () => {
+    dispatch(clearAliasesSuggestions());
+  };
+
+  const hasValue = value.length > 0;
+
+  return (
+    <div className='aliases_search search'>
+      <label>
+        <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
+
+        <input
+          className='search__input'
+          type='text'
+          value={value}
+          onChange={handleChange}
+          onKeyUp={handleKeyUp}
+          placeholder={intl.formatMessage(messages.search)}
+        />
+      </label>
+
+      <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
+        <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
+      </div>
+      <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
+    </div>
+  );
+};
+
+export default Search;
diff --git a/app/soapbox/features/follow_recommendations/components/account.js b/app/soapbox/features/follow_recommendations/components/account.js
deleted file mode 100644
index c15fc6bcc..000000000
--- a/app/soapbox/features/follow_recommendations/components/account.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display_name';
-import Permalink from 'soapbox/components/permalink';
-import ActionButton from 'soapbox/features/ui/components/action_button';
-import { makeGetAccount } from 'soapbox/selectors';
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = (state, props) => ({
-    account: getAccount(state, props.id),
-  });
-
-  return mapStateToProps;
-};
-
-const getFirstSentence = str => {
-  const arr = str.split(/(([.?!]+\s)|[．。？！\n•])/);
-
-  return arr[0];
-};
-
-export default @connect(makeMapStateToProps)
-class Account extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record.isRequired,
-    intl: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-  };
-
-  render() {
-    const { account } = this.props;
-
-    return (
-      <div className='account follow-recommendations-account'>
-        <div className='account__wrapper'>
-          <Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-
-            <DisplayName account={account} />
-
-            <div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div>
-          </Permalink>
-
-          <div className='account__relationship'>
-            <ActionButton account={account} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/follow_recommendations/components/account.tsx b/app/soapbox/features/follow_recommendations/components/account.tsx
new file mode 100644
index 000000000..8ba56b497
--- /dev/null
+++ b/app/soapbox/features/follow_recommendations/components/account.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import Avatar from 'soapbox/components/avatar';
+import DisplayName from 'soapbox/components/display_name';
+import Permalink from 'soapbox/components/permalink';
+import ActionButton from 'soapbox/features/ui/components/action_button';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+
+const getAccount = makeGetAccount();
+
+const getFirstSentence = (str: string) => {
+  const arr = str.split(/(([.?!]+\s)|[．。？！\n•])/);
+
+  return arr[0];
+};
+
+interface IAccount {
+  id: string,
+}
+
+const Account: React.FC<IAccount> = ({ id }) => {
+  const account = useAppSelector((state) => getAccount(state, id));
+
+  if (!account) return null;
+
+  return (
+    <div className='account follow-recommendations-account'>
+      <div className='account__wrapper'>
+        <Permalink className='account__display-name account__display-name--with-note' title={account.acct} href={account.url} to={`/@${account.get('acct')}`}>
+          <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+
+          <DisplayName account={account} />
+
+          <div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div>
+        </Permalink>
+
+        <div className='account__relationship'>
+          <ActionButton account={account} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Account;
diff --git a/app/soapbox/features/follow_recommendations/components/follow_recommendations_container.js b/app/soapbox/features/follow_recommendations/components/follow_recommendations_container.js
deleted file mode 100644
index 59c4f382b..000000000
--- a/app/soapbox/features/follow_recommendations/components/follow_recommendations_container.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import { Button } from 'soapbox/components/ui';
-
-import FollowRecommendationsList from './follow_recommendations_list';
-
-export default class FollowRecommendationsContainer extends React.Component {
-
-  static propTypes = {
-    onDone: PropTypes.func.isRequired,
-  }
-
-  handleDone = () => {
-    this.props.onDone();
-  }
-
-  render() {
-    return (
-      <div className='scrollable follow-recommendations-container'>
-        <div className='column-title'>
-          <h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
-          <h2 className='follow_subhead'><FormattedMessage id='follow_recommendation.subhead' defaultMessage='Let&#39;s get started!' /></h2>
-          <p><FormattedMessage id='follow_recommendations.lead' defaultMessage='Don&#39;t be afraid to make mistakes; you can unfollow people at any time.' /></p>
-        </div>
-
-        <FollowRecommendationsList />
-
-        <div className='column-actions'>
-          <Button onClick={this.handleDone}>
-            <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/follow_recommendations/components/follow_recommendations_container.tsx b/app/soapbox/features/follow_recommendations/components/follow_recommendations_container.tsx
new file mode 100644
index 000000000..c3f198f94
--- /dev/null
+++ b/app/soapbox/features/follow_recommendations/components/follow_recommendations_container.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from 'soapbox/components/ui';
+
+import FollowRecommendationsList from './follow_recommendations_list';
+
+interface IFollowRecommendationsContainer {
+  onDone: () => void,
+}
+
+const FollowRecommendationsContainer: React.FC<IFollowRecommendationsContainer> = ({ onDone }) => (
+  <div className='scrollable follow-recommendations-container'>
+    <div className='column-title'>
+      <h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
+      <h2 className='follow_subhead'><FormattedMessage id='follow_recommendation.subhead' defaultMessage='Let&#39;s get started!' /></h2>
+      <p><FormattedMessage id='follow_recommendations.lead' defaultMessage='Don&#39;t be afraid to make mistakes; you can unfollow people at any time.' /></p>
+    </div>
+
+    <FollowRecommendationsList />
+
+    <div className='column-actions'>
+      <Button onClick={onDone}>
+        <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
+      </Button>
+    </div>
+  </div>
+);
+
+export default FollowRecommendationsContainer;
diff --git a/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js b/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js
deleted file mode 100644
index 7fc06319b..000000000
--- a/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchSuggestions } from 'soapbox/actions/suggestions';
-import { Spinner } from 'soapbox/components/ui';
-
-import Account from './account';
-
-const mapStateToProps = state => ({
-  suggestions: state.getIn(['suggestions', 'items']),
-  isLoading: state.getIn(['suggestions', 'isLoading']),
-});
-
-export default @connect(mapStateToProps)
-class FollowRecommendationsList extends ImmutablePureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    suggestions: ImmutablePropTypes.list,
-    isLoading: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { dispatch, suggestions } = this.props;
-
-    // Don't re-fetch if we're e.g. navigating backwards to this page,
-    // since we don't want followed accounts to disappear from the list
-    if (suggestions.size === 0) {
-      dispatch(fetchSuggestions(true));
-    }
-  }
-
-  render() {
-    const { suggestions, isLoading } = this.props;
-
-    if (isLoading) {
-      return (
-        <div className='column-list'>
-          <Spinner />
-        </div>
-      );
-    }
-
-    return (
-      <div className='column-list'>
-        {suggestions.size > 0 ? suggestions.map(suggestion => (
-          <Account key={suggestion.get('account')} id={suggestion.get('account')} />
-        )) : (
-          <div className='column-list__empty-message'>
-            <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
-          </div>
-        )}
-      </div>
-    );
-
-  }
-
-}
diff --git a/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx b/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx
new file mode 100644
index 000000000..4ca838072
--- /dev/null
+++ b/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { fetchSuggestions } from 'soapbox/actions/suggestions';
+import { Spinner } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+import Account from './account';
+
+const FollowRecommendationsList: React.FC = () => {
+  const dispatch = useDispatch();
+
+  const suggestions = useAppSelector((state) => state.suggestions.get('items'));
+  const isLoading = useAppSelector((state) => state.suggestions.get('isLoading'));
+
+  useEffect(() => {
+    if (suggestions.size === 0) {
+      dispatch(fetchSuggestions());
+    }
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className='column-list'>
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className='column-list'>
+      {suggestions.size > 0 ? suggestions.map((suggestion: { account: string }) => (
+        <Account key={suggestion.account} id={suggestion.account} />
+      )) : (
+        <div className='column-list__empty-message'>
+          <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FollowRecommendationsList;
diff --git a/app/soapbox/features/follow_recommendations/index.js b/app/soapbox/features/follow_recommendations/index.js
deleted file mode 100644
index 2e9e3bcc3..000000000
--- a/app/soapbox/features/follow_recommendations/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router-dom';
-
-import Column from 'soapbox/features/ui/components/column';
-
-import FollowRecommendationsContainer from './components/follow_recommendations_container';
-
-export default @withRouter
-class FollowRecommendations extends React.Component {
-
-  static propTypes = {
-    history: PropTypes.object.isRequired,
-  };
-
-  onDone = () => {
-    this.props.history.push('/');
-  }
-
-  render() {
-    return (
-      <Column>
-        <FollowRecommendationsContainer onDone={this.onDone} />
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/follow_recommendations/index.tsx b/app/soapbox/features/follow_recommendations/index.tsx
new file mode 100644
index 000000000..444504532
--- /dev/null
+++ b/app/soapbox/features/follow_recommendations/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Column from 'soapbox/features/ui/components/column';
+
+import FollowRecommendationsContainer from './components/follow_recommendations_container';
+
+const FollowRecommendations: React.FC = () => {
+  const history = useHistory();
+
+  const onDone = () => {
+    history.push('/');
+  };
+
+  return (
+    <Column>
+      <FollowRecommendationsContainer onDone={onDone} />
+    </Column>
+  );
+};
+
+export default FollowRecommendations;
diff --git a/app/soapbox/features/intentional_error/index.js b/app/soapbox/features/intentional_error/index.tsx
similarity index 50%
rename from app/soapbox/features/intentional_error/index.js
rename to app/soapbox/features/intentional_error/index.tsx
index b3d7fa0f7..01ae3a5c4 100644
--- a/app/soapbox/features/intentional_error/index.js
+++ b/app/soapbox/features/intentional_error/index.tsx
@@ -4,10 +4,8 @@ import React from 'react';
  * IntentionalError:
  * For testing logging/monitoring & previewing ErrorBoundary design.
  */
-export default class IntentionalError extends React.Component {
+const IntentionalError: React.FC = () => {
+  throw 'This error is intentional.';
+};
 
-  render() {
-    throw 'This error is intentional.';
-  }
-
-}
+export default IntentionalError;