diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index 939b2b851f..6f6ec17dae 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -1,18 +1,19 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Helmet } from 'react-helmet';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { bindActionCreators } from 'redux';
-import { useTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-
-import * as ProjectActions from '../../IDE/actions/project';
-import * as ProjectsActions from '../../IDE/actions/projects';
-import * as CollectionsActions from '../../IDE/actions/collections';
-import * as ToastActions from '../../IDE/actions/toast';
+import {
+  getCollections,
+  removeFromCollection
+} from '../../IDE/actions/collections';
+import {
+  resetSorting,
+  toggleDirectionForField
+} from '../../IDE/actions/sorting';
 import * as SortingActions from '../../IDE/actions/sorting';
-import * as IdeActions from '../../IDE/actions/ide';
 import { getCollection } from '../../IDE/selectors/collections';
 import Loader from '../../App/components/loader';
 import dates from '../../../utils/formatDate';
@@ -22,14 +23,11 @@ import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import RemoveIcon from '../../../images/close.svg';
 import CollectionMetadata from './CollectionMetadata';
 
-const CollectionItemRowBase = ({
-  collection,
-  item,
-  isOwner,
-  removeFromCollection
-}) => {
+const CollectionItemRow = ({ collection, item, isOwner }) => {
   const { t } = useTranslation();
 
+  const dispatch = useDispatch();
+
   const projectIsDeleted = item.isDeleted;
 
   const handleSketchRemove = () => {
@@ -40,7 +38,7 @@ const CollectionItemRowBase = ({
         t('Collection.DeleteFromCollection', { name_sketch: name })
       )
     ) {
-      removeFromCollection(collection.id, item.projectId);
+      dispatch(removeFromCollection(collection.id, item.projectId));
     }
   };
 
@@ -78,7 +76,7 @@ const CollectionItemRowBase = ({
   );
 };
 
-CollectionItemRowBase.propTypes = {
+CollectionItemRow.propTypes = {
   collection: PropTypes.shape({
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired
@@ -95,139 +93,89 @@ CollectionItemRowBase.propTypes = {
       })
     }).isRequired
   }).isRequired,
-  isOwner: PropTypes.bool.isRequired,
-  user: PropTypes.shape({
-    username: PropTypes.string,
-    authenticated: PropTypes.bool.isRequired
-  }).isRequired,
-  removeFromCollection: PropTypes.func.isRequired
+  isOwner: PropTypes.bool.isRequired
 };
 
-function mapDispatchToPropsSketchListRow(dispatch) {
-  return bindActionCreators(
-    Object.assign({}, CollectionsActions, ProjectActions, IdeActions),
-    dispatch
-  );
-}
+const Collection = ({ username, collectionId }) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
 
-const CollectionItemRow = connect(
-  null,
-  mapDispatchToPropsSketchListRow
-)(CollectionItemRowBase);
+  const collection = useSelector((state) => getCollection(state, collectionId));
 
-class Collection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.props.getCollections(this.props.username);
-    this.props.resetSorting();
-    this._renderFieldHeader = this._renderFieldHeader.bind(this);
-  }
+  const hasCollectionItems = collection?.items.length > 0;
+  const hasZeroItems = collection?.items.length === 0;
 
-  getTitle() {
-    if (this.hasCollection()) {
-      return `${this.props.t('Common.SiteName')} | ${this.getCollectionName()}`;
-    }
-    if (this.props.username === this.props.user.username) {
-      return this.props.t('Collection.Title');
-    }
-    return this.props.t('Collection.AnothersTitle', {
-      anotheruser: this.props.username
-    });
-  }
+  const loading = useSelector((state) => state.loading);
+  const showLoader = loading && !collection;
 
-  getUsername() {
-    return this.props.username !== undefined
-      ? this.props.username
-      : this.props.user.username;
-  }
+  const currentUsername = useSelector((state) => state.user.username);
+  const isOwner = username === currentUsername;
 
-  getCollectionName() {
-    return this.props.collection.name;
-  }
+  useEffect(() => {
+    dispatch(resetSorting());
+  }, []);
 
-  isOwner() {
-    let isOwner = false;
-
-    if (
-      this.props.user != null &&
-      this.props.user.username &&
-      this.props.collection?.owner?.username === this.props.user.username
-    ) {
-      isOwner = true;
+  useEffect(() => {
+    if (!collection) {
+      dispatch(getCollections(username));
     }
+  }, [username, collection]);
 
-    return isOwner;
-  }
-
-  hasCollection() {
-    return !!this.props.collection;
-  }
-
-  hasCollectionItems() {
-    return this.hasCollection() && this.props.collection.items.length > 0;
-  }
+  const title = useMemo(() => {
+    if (collection) {
+      return `${t('Common.SiteName')} | ${collection.name}`;
+    }
+    return isOwner
+      ? t('Collection.Title')
+      : t('Collection.AnothersTitle', { anotheruser: username });
+  }, [t, username, collection, isOwner]);
 
-  _renderLoader() {
-    if (this.props.loading && !this.hasCollection()) return <Loader />;
-    return null;
-  }
+  const { field, direction } = useSelector((state) => state.sorting);
 
-  _renderEmptyTable() {
-    if (this.hasCollection() && !this.hasCollectionItems()) {
-      return (
-        <p className="collection-empty-message">
-          {this.props.t('Collection.NoSketches')}
-        </p>
-      );
-    }
-    return null;
-  }
+  // TODO: clean this up into a generic table/list/sort component
 
-  _getButtonLabel = (fieldName, displayName) => {
-    const { field, direction } = this.props.sorting;
+  const _getButtonLabel = (fieldName, displayName) => {
     let buttonLabel;
     if (field !== fieldName) {
       if (field === 'name') {
-        buttonLabel = this.props.t('Collection.ButtonLabelAscendingARIA', {
+        buttonLabel = t('Collection.ButtonLabelAscendingARIA', {
           displayName
         });
       } else {
-        buttonLabel = this.props.t('Collection.ButtonLabelDescendingARIA', {
+        buttonLabel = t('Collection.ButtonLabelDescendingARIA', {
           displayName
         });
       }
     } else if (direction === SortingActions.DIRECTION.ASC) {
-      buttonLabel = this.props.t('Collection.ButtonLabelDescendingARIA', {
+      buttonLabel = t('Collection.ButtonLabelDescendingARIA', {
         displayName
       });
     } else {
-      buttonLabel = this.props.t('Collection.ButtonLabelAscendingARIA', {
+      buttonLabel = t('Collection.ButtonLabelAscendingARIA', {
         displayName
       });
     }
     return buttonLabel;
   };
 
-  _renderFieldHeader(fieldName, displayName) {
-    const { field, direction } = this.props.sorting;
+  const _renderFieldHeader = (fieldName, displayName) => {
     const headerClass = classNames({
       arrowDown: true,
       'sketches-table__header--selected': field === fieldName
     });
-    const buttonLabel = this._getButtonLabel(fieldName, displayName);
     return (
       <th scope="col">
         <button
           className="sketch-list__sort-button"
-          onClick={() => this.props.toggleDirectionForField(fieldName)}
-          aria-label={buttonLabel}
+          onClick={() => dispatch(toggleDirectionForField(fieldName))}
+          aria-label={_getButtonLabel(fieldName, displayName)}
         >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName &&
             direction === SortingActions.DIRECTION.ASC && (
               <ArrowUpIcon
                 role="img"
-                aria-label={this.props.t('Collection.DirectionAscendingARIA')}
+                aria-label={t('Collection.DirectionAscendingARIA')}
                 focusable="false"
               />
             )}
@@ -235,132 +183,73 @@ class Collection extends React.Component {
             direction === SortingActions.DIRECTION.DESC && (
               <ArrowDownIcon
                 role="img"
-                aria-label={this.props.t('Collection.DirectionDescendingARIA')}
+                aria-label={t('Collection.DirectionDescendingARIA')}
                 focusable="false"
               />
             )}
         </button>
       </th>
     );
-  }
-
-  render() {
-    const isOwner = this.isOwner();
+  };
 
-    return (
-      <main
-        className="collection-container"
-        data-has-items={this.hasCollectionItems() ? 'true' : 'false'}
-      >
-        <article className="collection">
-          <Helmet>
-            <title>{this.getTitle()}</title>
-          </Helmet>
-          {this._renderLoader()}
-          <CollectionMetadata collectionId={this.props.collectionId} />
-          <article className="collection-content">
-            <div className="collection-table-wrapper">
-              {this._renderEmptyTable()}
-              {this.hasCollectionItems() && (
-                <table
-                  className="sketches-table"
-                  summary={this.props.t('Collection.TableSummary')}
-                >
-                  <thead>
-                    <tr>
-                      {this._renderFieldHeader(
-                        'name',
-                        this.props.t('Collection.HeaderName')
-                      )}
-                      {this._renderFieldHeader(
-                        'createdAt',
-                        this.props.t('Collection.HeaderCreatedAt')
-                      )}
-                      {this._renderFieldHeader(
-                        'user',
-                        this.props.t('Collection.HeaderUser')
-                      )}
-                      <th scope="col"></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {this.props.collection.items.map((item) => (
-                      <CollectionItemRow
-                        key={item.id}
-                        item={item}
-                        user={this.props.user}
-                        username={this.getUsername()}
-                        collection={this.props.collection}
-                        isOwner={isOwner}
-                      />
-                    ))}
-                  </tbody>
-                </table>
-              )}
-            </div>
-          </article>
+  return (
+    <main
+      className="collection-container"
+      data-has-items={hasCollectionItems ? 'true' : 'false'}
+    >
+      <article className="collection">
+        <Helmet>
+          <title>{title}</title>
+        </Helmet>
+        {showLoader && <Loader />}
+        {collection && (
+          <CollectionMetadata collection={collection} isOwner={isOwner} />
+        )}
+        <article className="collection-content">
+          <div className="collection-table-wrapper">
+            {hasZeroItems && (
+              <p className="collection-empty-message">
+                {t('Collection.NoSketches')}
+              </p>
+            )}
+            {hasCollectionItems && (
+              <table
+                className="sketches-table"
+                summary={t('Collection.TableSummary')}
+              >
+                <thead>
+                  <tr>
+                    {_renderFieldHeader('name', t('Collection.HeaderName'))}
+                    {_renderFieldHeader(
+                      'createdAt',
+                      t('Collection.HeaderCreatedAt')
+                    )}
+                    {_renderFieldHeader('user', t('Collection.HeaderUser'))}
+                    <th scope="col"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {collection.items.map((item) => (
+                    <CollectionItemRow
+                      key={item.id}
+                      item={item}
+                      collection={collection}
+                      isOwner={isOwner}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
         </article>
-      </main>
-    );
-  }
-}
+      </article>
+    </main>
+  );
+};
 
 Collection.propTypes = {
   collectionId: PropTypes.string.isRequired,
-  user: PropTypes.shape({
-    username: PropTypes.string,
-    authenticated: PropTypes.bool.isRequired
-  }).isRequired,
-  getCollections: PropTypes.func.isRequired,
-  collection: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-    slug: PropTypes.string,
-    description: PropTypes.string,
-    owner: PropTypes.shape({
-      username: PropTypes.string
-    }).isRequired,
-    items: PropTypes.arrayOf(PropTypes.shape({}))
-  }),
-  username: PropTypes.string,
-  loading: PropTypes.bool.isRequired,
-  toggleDirectionForField: PropTypes.func.isRequired,
-  resetSorting: PropTypes.func.isRequired,
-  sorting: PropTypes.shape({
-    field: PropTypes.string.isRequired,
-    direction: PropTypes.string.isRequired
-  }).isRequired,
-  t: PropTypes.func.isRequired
-};
-
-Collection.defaultProps = {
-  username: undefined,
-  collection: null
+  username: PropTypes.string.isRequired
 };
 
-function mapStateToProps(state, ownProps) {
-  return {
-    user: state.user,
-    collection: getCollection(state, ownProps.collectionId),
-    sorting: state.sorting,
-    loading: state.loading,
-    project: state.project
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(
-    Object.assign(
-      {},
-      CollectionsActions,
-      ProjectsActions,
-      ToastActions,
-      SortingActions
-    ),
-    dispatch
-  );
-}
-
-export default withTranslation()(
-  connect(mapStateToProps, mapDispatchToProps)(Collection)
-);
+export default Collection;
diff --git a/client/modules/User/components/CollectionMetadata.jsx b/client/modules/User/components/CollectionMetadata.jsx
index 88dc6d0312..ec6e138d57 100644
--- a/client/modules/User/components/CollectionMetadata.jsx
+++ b/client/modules/User/components/CollectionMetadata.jsx
@@ -10,26 +10,19 @@ import { editCollection } from '../../IDE/actions/collections';
 import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketchList';
 import EditableInput from '../../IDE/components/EditableInput';
 import { SketchSearchbar } from '../../IDE/components/Searchbar';
-import { getCollection } from '../../IDE/selectors/collections';
 import ShareURL from './CollectionShareButton';
 
-function CollectionMetadata({ collectionId }) {
+function CollectionMetadata({ collection, isOwner }) {
   const { t } = useTranslation();
 
   const dispatch = useDispatch();
 
-  const collection = useSelector((state) => getCollection(state, collectionId));
   const currentUsername = useSelector((state) => state.user.username);
 
   const [isAddingSketches, setIsAddingSketches] = useState(false);
 
-  if (!collection) {
-    return null;
-  }
-
   const { id, name, description, items, owner } = collection;
-  const { username } = owner;
-  const isOwner = !!currentUsername && currentUsername === username;
+  const { username: ownerUsername } = owner;
 
   const hostname = window.location.origin;
 
@@ -85,7 +78,7 @@ function CollectionMetadata({ collectionId }) {
 
           <p className="collection-metadata__user">
             {t('Collection.By')}
-            <Link to={`/${username}/sketches`}>{username}</Link>
+            <Link to={`/${ownerUsername}/sketches`}>{ownerUsername}</Link>
           </p>
 
           <p className="collection-metadata__user">
@@ -94,7 +87,7 @@ function CollectionMetadata({ collectionId }) {
         </div>
 
         <div className="collection-metadata__column--right">
-          <ShareURL value={`${hostname}/${username}/collections/${id}`} />
+          <ShareURL value={`${hostname}/${ownerUsername}/collections/${id}`} />
           {isOwner && (
             <Button onClick={() => setIsAddingSketches(true)}>
               {t('Collection.AddSketch')}
@@ -117,7 +110,17 @@ function CollectionMetadata({ collectionId }) {
 }
 
 CollectionMetadata.propTypes = {
-  collectionId: PropTypes.string.isRequired
+  collection: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    slug: PropTypes.string,
+    description: PropTypes.string,
+    owner: PropTypes.shape({
+      username: PropTypes.string
+    }).isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape({}))
+  }).isRequired,
+  isOwner: PropTypes.bool.isRequired
 };
 
 export default CollectionMetadata;